语义 ui 下拉菜单不起作用答案

【问题标题】：semantic-ui dropdown menu do not work语义 ui 下拉菜单不起作用
【发布时间】：2014-08-17 07:55:39
【问题描述】：

我一直在尝试使用 Semantic-UI 构建菜单。我根本无法使用下拉菜单。我复制了页面Menu examples 并取出了除分层菜单之外的所有内容并将其放在单独的文件中。只有下拉菜单不起作用，但没有错误。谁能告诉我我错过了什么？

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Script-Type" content="text/jscript" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    
    <link rel="stylesheet" type="text/css" class="ui" href="http://semantic-ui.com/build/packaged/css/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="http://semantic-ui.com/stylesheets/semantic.css">  
    <script src="http://semantic-ui.com/javascript/library/jquery.min.js"></script>
    <script src="http://semantic-ui.com/javascript/library/history.js"></script>
    <script src="http://semantic-ui.com/javascript/library/easing.js"></script>
    <script src="http://semantic-ui.com/javascript/library/ace/ace.js"></script>
    <script src="http://semantic-ui.com/javascript/library/tablesort.js"></script>
    <script src="http://semantic-ui.com/javascript/library/waypoints.js"></script>
    <script src="http://semantic-ui.com/build/packaged/javascript/semantic.min.js"></script>
    <script src="http://semantic-ui.com/javascript/semantic.js"></script>
  </head>
  <body class="menu" >
    <div class="ui tiered menu">
      <div class="menu">
        <a class="active item">
          <i class="users icon"></i>
          Friends
        </a>
        <a class="item">
          <i class="grid layout icon"></i> Browse
        </a>
        <a class="item">
          <i class="mail icon"></i> Messages
        </a>
        <div class="right menu">
          <div class="item">
            <div class="ui icon input">
              <input type="text" placeholder="Search...">
              <i class="search icon"></i>
            </div>
          </div>
          <div class="ui dropdown item">
            More <i class="icon dropdown"></i>
            <div class="menu">
              <a class="item"><i class="edit icon"></i> Edit Profile</a>
              <a class="item"><i class="globe icon"></i> Choose Language</a>
              <a class="item"><i class="settings icon"></i> Account Settings</a>
            </div>
          </div>
        </div>
      </div>
      <div class="ui sub menu">
        <a class="active item">Search</a>
        <a class="item">Add</a>
        <a class="item">Remove</a>
      </div>
    </div>

  </body>
</html>

【问题讨论】：

你试过$(".dropdown").dropdown() 来初始化吗？

标签： javascript html semantic-ui

【解决方案1】：

你需要像这样初始化你的下拉菜单：

$('.ui.dropdown')
  .dropdown();

还有更多信息HERE

【讨论】：

【解决方案2】：

一种方法是 JS，您需要在其中初始化脚本。另一种方法是在下拉菜单中添加一个“简单”类

<div class="ui simple dropdown item">

【讨论】：

谢谢你！使原型制作更加容易/快速。为您提供一个下拉菜单 - 仅此而已。非常好。
这可行，但点击项目不会关闭下拉菜单。

【解决方案3】：

如前所述，您可以：

使用 Javascript 或
使用simple 类。

这两种方式之间有一个非常重要的区别：使用 simple 类，您不需要 Semantic-UI Javascript 即可让您的下拉菜单工作。 simple 类使用 :hover 选择器。

请注意，使用 simple 类（不是 Javascript 初始化）不会给您带来很好的下拉效果。

因此，以下代码将在您的页面中显示没有 Semantic-UI Javascript 的下拉菜单：

<div class="ui simple dropdown item">

【讨论】：

【解决方案4】：

简要说明：

如果下拉菜单没有显示并且Bootstrap已经与semantic-ui在同一页面加载，那么请确保在引导后加载语义js库。

出现这种情况是因为 bootstrap 和语义 ui 都具有用于显示下拉菜单的相同 .dropdown() 方法。也就是说，在语义 UI 和引导程序之间加载的最后一个库将覆盖所有其他存在的 .dropdown() 方法。

【讨论】：

【解决方案5】：

如果给定的答案对您不起作用，请确保您没有使用 bootstrap 和语义 UI

【讨论】：

【解决方案6】：

如果您使用 $('.ui.dropdown').dropdown(); 进行初始化，还要确保您的页面引用 dropdown.js

【讨论】：

【解决方案7】：

当我在上面添加函数行时它对我有用

    <script> 
     $(document).ready(function(){
          $('.ui.dropdown') .dropdown();
    });
    </script>

【讨论】：