logo标签列表

Semantic-ui下拉菜单无法正常工作。

jqueryhtmlsemantic-ui
9
我在我的 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上可以运行，但在您自己的环境中无法运行，请检查脚本源路径。 - BReal14
你的代码中可能有一个JS文件引用没有被正确地获取。 - Kashif Qureshi
@briansol 脚本路径没问题。它已经正确加载。 - Sungho Lee
3个回答
17
尝试放置
<script>
    $('.ui.dropdown').dropdown();
</script>

您正在 </body> 结束标签之前运行下拉脚本。这些元素 $('.ui.dropdown') 甚至还不存在于 DOM 中，因此无法附加。

1
我讨厌当jQuery在没有元素的情况下悄悄地执行操作。 - Ruan Mendes
非常感谢！它对我帮助很大！ - Sungho Lee
3
你也可以在<head>标签中添加$(function(){ $('.ui.dropdown').dropdown(); })来实现同样的效果。请注意，翻译过程中我会尽量使内容通俗易懂，但不会改变原意，也不会添加额外解释。 - Ruan Mendes
1
我也尝试过$(document).ready(function() {...}); 并将其保留在头部，但没有起作用。这里的问题是什么？ - Sungho Lee
@R4T1N4 看起来它可以工作 http://jsfiddle.net/o8r0fzfg/ 请注意，我的小样例确实说要从头部加载JavaScript。你在问题中提到的那个可能是在onload时加载它。 - Ruan Mendes
这解决了我过去30分钟的所有问题。我在我的页眉菜单模板中使用了一个下拉菜单，但无法使其正常工作，但是我将其放在页脚模板中，现在下拉菜单可以在任何地方正常工作了。谢谢。 - agm1984
3

试着这样写：

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

你的脚本位于body标签之上，因此你需要检查DOM是否准备就绪。ready()函数将首先检查DOM是否准备就绪，然后再运行脚本。

0
如果您在theme.config中的集合下使用自定义主题，但未在主题文件夹中提供变量和覆盖的实际覆盖文件（即使是空文件），也会出现此错误。没有显示js错误，但下拉菜单无法正常工作。请确保提供了所有覆盖文件或仅替换您真正想要使用的元素从自定义主题中在theme.config中。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接