Question

我正在为一个小项目使用语义ui库，我遇到了库的下拉列表问题。我正在尝试使用语义UI实现一个简单的下拉列表。但问题是，当我点击它时它不会扩展。我看不到下拉选项。

这是代码。一些帮助将不胜感激。

<head>
    <script type="text/javascript" src="js-lib/semantic.min.js"></script>
    <script type="text/javascript" src="js-lib/jquery-1.10.2.min.js"></script>

    <link rel="stylesheet" href="css/semantic.css" type="text/css" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />


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

</head>

<body background="backgrounds/bg.jpg" style="background-repeat:no-repeat">
    <div class="ui selection dropdown">
      <input type="hidden" name="gender">
      <div class="default text">Gender</div>
      <i class="dropdown icon"></i>
      <div class="menu">
        <div class="item" data-value="1">Male</div>
        <div class="item" data-value="0">Female</div>
      </div>
    </div>
</body>

</html>

以下是演示页面的链接：

http://meetup.2fh.co/workspace/register.html

Answer 1

您应该尝试这一点，因为JQuery无法处理未正确创建的元素。

$(document).ready(function(){
            console.log("TEST");
            $('.ui.dropdown').dropdown();
        });

Answer 2

将脚本移动到菜单标记下方或将该函数包装在document.ready中。 jQuery不能对尚不存在的元素起作用。

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

Answer 3

哟需要把fisrt jQuery

    <script type="text/javascript" src="js-lib/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js-lib/semantic.min.js"></script>

语义UI：下拉不扩展

3 个答案: