Semantic-ui 下拉菜单不起作用答案

【问题标题】：Semantic-ui dropdown is not workingSemantic-ui 下拉菜单不起作用
【发布时间】：2014-08-27 14:11:12
【问题描述】：

在我的 HTML 表单中集成下拉菜单时遇到问题。我已经尝试了我能做的一切以及我在网上找到的东西，但它仍然不起作用。我发现这段代码在 JSFiddle 上运行正常。脚本路径很好，脚本加载正确。

我错过了什么吗？

<html>
  <head>
      <meta charset="UTF-8">
      <link href="../semantic/packaged/css/semantic.min.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="../semantic/packaged/javascript/semantic.min.js"></script>
  <script>
    $('.ui.dropdown').dropdown();
  </script>
  </head>
  <body>
      <form class="ui form segment" style="width:400px; margin:auto;" method="POST" action="register_do.php">
    <div class="field">
      <label>학년</label>
      <div class="ui fluid dropdown selection">
        <input type="hidden" name="grade">
        <div class="default text">학년</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item" data-value="10">고1</div>
          <div class="item" data-value="11">고2</div>
          <div class="item" data-value="12">고3</div>
        </div>
      </div>
    </div>
    <div class="ui buttons">
              <button class="ui red submit button">등록</button>
              <div class="or"></div>
              <div class="ui button" onClick="history.back();">취소</div>
          </div>
      </form>
  </body>
</html>

【问题讨论】：

如果它适用于 Fiddle，但不适用于您自己的环境，请检查您的脚本源路径。
可能是您的代码中没有正确获取 js 文件引用之一。
@briansol 脚本路径很好。它已正确加载。

标签： jquery html semantic-ui

【解决方案1】：

试试看

<script>
    $('.ui.dropdown').dropdown();
</script>

就在结束 </body> 标记之前。在这些元素 $('.ui.dropdown') 甚至存在于 DOM 之前，您正在运行下拉脚本，因此没有任何附加内容。

【讨论】：

我讨厌 jQuery 默默地对任何元素执行操作
非常感谢！这对我帮助很大！
你也可以把$(function(){ $('.ui.dropdown').dropdown(); })放在头上
我也尝试过$(document).ready(function() {...}); 并将其留在脑海中但没有奏效。这里有什么问题？
@R4T1N4 它似乎可以工作jsfiddle.net/o8r0fzfg 请注意，我的小提琴确实说从头部加载 JavaScript。您在问题中提到的那个可能正在加载它onload

【解决方案2】：

试着这样写：

$(document).ready(function() {
    $('.ui.dropdown').dropdown();
});

您的脚本位于 body 标记之上，因此您必须检查 DOM 是否准备就绪。 ready() 函数会先检查 DOM 是否准备好，然后运行脚本。

【讨论】：

【解决方案3】：

如果您为 theme.config 中的集合下的菜单元素使用自定义主题，但未在主题文件夹中提供变量和覆盖的实际覆盖文件（即使是空文件），也会发生此错误。没有显示 js 错误，但下拉菜单不起作用。确保您提供了所有覆盖文件，或者仅从 theme.config 中的自定义主题中替换您真正想要使用的元素。

【讨论】：