javascript - 语义 UI 弹出菜单不起作用

Question

我是语义 UI 和 Web 开发的新手，我无法使弹出菜单正常工作。实际上我正在尝试在 this page 中创建弹出菜单示例并且文档没有告诉我运行任何 javascript 等。我在这里创建了一个 jsfiddle:

https://jsfiddle.net/jhg9df8t/

代码是:

<div class="ui menu">
  <a class="browse item">
    Browse
    <i class="dropdown icon"></i>
  </a>
</div>
<div class="ui fluid popup top left transition hidden">
  <div class="ui four column relaxed equal height divided grid">
    <div class="column">
      <h4 class="ui header">Fabrics</h4>
      <div class="ui link list">
        <a class="item">Cashmere</a>
        <a class="item">Linen</a>
        <a class="item">Cotton</a>
        <a class="item">Viscose</a>
      </div>
    </div>
    <div class="column">
      <h4 class="ui header">Size</h4>
      <div class="ui link list">
        <a class="item">Small</a>
        <a class="item">Medium</a>
        <a class="item">Large</a>
        <a class="item">Plus Sizes</a>
      </div>
    </div>
    <div class="column">
      <h4 class="ui header">Colored</h4>
      <div class="ui link list">
        <a class="item">Neutrals</a>
        <a class="item">Brights</a>
        <a class="item">Pastels</a>
      </div>
    </div>
    <div class="column">
      <h4 class="ui header">Types</h4>
      <div class="ui link list">
        <a class="item">Knitwear</a>
        <a class="item">Outerwear</a>
        <a class="item">Pants</a>
        <a class="item">Shoes</a>
      </div>
    </div>
  </div>
</div>

Answer 1

您需要按如下方式初始化弹出窗口。

$('.example .menu .browse').popup({
inline   : true,
hoverable: true,
position : 'bottom left',
delay: {
  show: 300,
  hide: 800
 }
 });

这来自 Popup 文档(.example 类元素不包含在您从语义 ui 复制的代码中。因此，如果您的代码中没有带有示例类的元素，我建议在没有它的情况下更新初始化)。请参阅它以获取更多信息。 http://semantic-ui.com/modules/popup.html#/examples

此外，我认为您可能需要包含与弹出插件关联的 JS 和 CSS。

如果你仔细阅读这里http://semantic-ui.com/collections/menu.html#popup-menu点击弹出窗口的链接，看看是否有任何额外的 JS 和/或 CSS。

希望对你有帮助。