Question

我正在尝试用语义ui构建一个网站，我的下拉菜单有问题。我已经阅读了另一个问题，解决方案是添加js。我已经做了但下拉仍然无法正常工作

这是我的代码。我做错了什么

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Semantic Ui</title>
  <link rel="stylesheet" href="semantic/dist/semantic.min.css">


</head>

<body>



    <div id="navbar" class="ui stackable menu">
      <div class="item">
        <img src="assets/images/logo.png">
      </div>
      <a class="item active" href="">Page1</a>

      <div class="ui  dropdown item">
          Dropdown
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item">Drop 1</div>
            <div class="item">Drop 2</div>
            <div class="item">Drop 3</div>
          </div>
        </div>
      <a class="item" href="">Page2</a>
      <a class="item" href="">Page3</a>
      <a class="item" href="">Page4</a>
    </div>


  <script src="semantic/dist/semantic.min.js"></script>
  <script>
    $('.ui.dropdown').dropdown();
  </script>
</body>

</html>

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

您必须添加Jquery（$）

<div id="heroes-dropdown" class="ui simple dropdown">
<div class="text">Heroes</div>
<i class="dropdown icon"></i>
<div class="menu">
    <a class="item"><i class="edit icon"></i> Edit Profile</a>
    <a class="item"><i class="globe icon"></i> Choose Language</a>
    <a class="item"><i class="settings icon"></i> Account Settings</a>
</div>

这就是你要找的（例子）

添加js后，Semantic-ui下拉列表仍无法正常工作

1 个答案: