语义UI下拉式不起作用 [英] Semantic-ui dropdown is not working

查看:94
本文介绍了语义UI下拉式不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我的HTML表单中整合下拉菜单时遇到问题。我尝试了我可以做的一切,以及我在网上找到的东西,但它仍然无法正常工作。我发现这段代码可以在JSFiddle上正常运行。

I have a trouble integrating a dropdown menu in my HTML form. I've tried everything I can do and what I found online but it still doesn't work. I found that this code runs properly on JSFiddle. The script paths are fine and the scripts are loaded correctly.

我错过了什么吗?

<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>


推荐答案

试着放入

Try putting

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

就在收盘前< / body> 标签。您在运行下拉脚本之前,这些元素 $('。ui.dropdown')甚至存在于DOM中,因此无需附加任何内容。

right before the closing </body> tag. You're running the dropdown script before these elements $('.ui.dropdown') even exist in the DOM so there's nothing to attach to.

这篇关于语义UI下拉式不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆