Question

发现了一些我无法理解的东西。

如果有一个带有语义ui的侧边菜单，当我在本地托管文件时，侧边菜单中的下拉菜单不起作用，但如果我把它放在jsfiddle中它工作正常

这是工作的jsfiddle https://jsfiddle.net/7rcrx8c4/

的index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" />



  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>


</head>
<body>

  <div id="main" class="ui container">
    <div class="ui top attached menu">
      <a class="item" id="menu"><i class="sidebar icon"></i>Menu</a>
      <div class="right menu">
        <a class="item"><i class="user icon"></i>Welcome : Foo</a>
      </div>
    </div>
    <br />

  </div>
  <div class="ui left vertical sidebar menu">
    <div class="item">
      <i class="grid layout icon"></i>Menu
    </div>
    <!-- Master menu -->
    <div class="ui dropdown item">
      <span class="text"><i class="book icon"></i></span>
      <i class="dropdown icon"></i>Master
      <div class="menu">
        <a class="item">a</a>
        <a class="item">b</a>
      </div>
    </div>
    <!-- End master -->
  </div>
  <script>
  $('.ui .dropdown').dropdown({
    on: 'hover'
  });
  $('.ui.left.sidebar').sidebar({
    transition: 'overlay'
  });

  $('.ui.left.sidebar')
  .sidebar('attach events', '#menu');
  </script>


</body>
</html>

的style.css

.ui.sidebar {
    overflow: visible !important;
}

有人可以指出我犯错的地方吗？

Answer 1

找出原因，

应在style.css

之后加载

semantic.css

感谢所有人的时间

语义UI侧菜单不起作用

1 个答案: