Question

我是Semantic-UI和Web开发的新手，我不能让弹出菜单工作。实际上我正在尝试在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类元素不包含在您从语义ui复制的代码中。因此，如果您的代码中没有带有示例类的元素，我会建议在没有它的情况下更新初始化）。有关更多信息，请参阅它。 http://semantic-ui.com/modules/popup.html#/examples

另外我认为你可能需要包括JS＆amp;与弹出插件相关的CSS。

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

我希望它有所帮助。

语义UI弹出菜单不起作用

1 个答案: