Question

语义 UI：下拉菜单未展开

2014-12-06

1223

jquery html semantic-ui

我正在为一个小项目使用语义 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

您需要先放置 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>