Question

我知道我必须错过一些东西，因为我的计算机中没有一个可行的例子。

在网站上选择最简单的example。

我按原样复制了代码，但它对我来说根本不起作用。我还包括 semantic.min.css 和 semantic.min.js ，以防万一我使用谷歌CDN包含jQuery。

以下是我的 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文件的顺序并且工作正常

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

Answer 2

我需要在包含.js和.css

之前包含jQuery

语义UI根本不起作用

2 个答案: