语义 UI：下拉菜单未扩展答案

【问题标题】：Semantics UI : Dropdown not expanding语义 UI：下拉菜单未扩展
【发布时间】：2016-07-15 01:13:08
【问题描述】：

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

【问题讨论】：

您能在 jsfiddle.net 或 codepen.io 中向我们展示您的问题吗？
你看浏览器控制台了吗？这应该是您对网站进行故障排除时的第一站。以下错误说明了您的问题：Uncaught ReferenceError: jQuery is not defined
已解决。 jQuery 1.10.2.min.js 与语义 UI 不兼容。使用了 2.1.1，一切正常！

标签： jquery html semantic-ui

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

要么将脚本移到菜单标记下方，要么将函数包装在 document.ready 中。 jQuery 不能作用于尚不存在的元素。

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

【讨论】：

我尝试将其放入 document.ready() 中。但这无济于事。
然后，正如上面 Fabian 建议的那样，我们需要一个演示。这里没有足够的工作。

【解决方案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>

【讨论】：