语义 UI 根本不起作用

Question

我知道我一定错过了一些东西，因为 none 在我的计算机中工作的示例。

在网站上先拿最简单的example。

我按原样复制了代码，但它对我来说根本不起作用。我包括了 semantic.min.css 和 semantic.min.js 也是为了以防万一我使用 [=35 包括了 jQuery =] CDN.

以下是我的html代码。

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>

</head>
<body>


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



<div class="ui dropdown">
  <input type="hidden" name="gender">
  <i class="dropdown icon"></i>
  <div class="default text">Gender</div>
  <div class="menu">
    <div class="item" data-value="male">Male</div>
    <div class="item" data-value="female">Female</div>
  </div>
</div>



</body>
</html>

输出是这样的..

谢谢！我对 JavaScript 和语义 UI 很陌生。

Answer 1

我需要在包含 .js 和 .css

之前包含 jQuery

Answer 2

我使用这种链接 js 文件的顺序并且工作正常

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
  <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="../bower_components/semantic/dist/semantic.min.css">
  <script src="../bower_components/semantic/dist/semantic.min.js"></script>
</head>
<body>


<select name="gender" class="ui dropdown" id="select">
  <option value="">Gender</option>
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>


<script type="text/javascript">
  $('#select')
    .dropdown()
  ;
</script>
</body>
</html>

语义 UI 根本不起作用

Semantic UI doesn't work at all

html

javascript

css

jquery

semantic-ui