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

Question

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

密码是：

<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 class 元素未包含在您从语义 ui 复制的代码中。因此，如果您没有带有示例 class 的该元素你的代码我建议在没有它的情况下更新初始化）。请参阅它以获取更多信息。 http://semantic-ui.com/modules/popup.html#/examples

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

如果你仔细阅读这里http://semantic-ui.com/collections/menu.html#popup-menu跟随link弹出并查看是否有任何额外的JS and/or CSS。

希望对您有所帮助。

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

Semantic-UI popup menu doesn't work

javascript

css

semantic-ui