前端

semantic下拉菜单初始化

semantic-ui 下拉菜单初始化

学习django时发现如下的代码下拉框在鼠标没有移动到选项前就消失了,好像是和上一层的text属性冲突，去掉text属性就可以正常使用下拉菜单，但是样式不好看。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="ui container nav">
    <div class="ui borderless text three item menu ">
      <div class="ui simple dropdown  item">
        Categories
        <i class="dropdown icon"></i>
        <div class="menu">
          <a class="item" href="?tag=life">life</a>
          <a class="item" href="?tag=tech">tech</a>
        </div>
      </div>
      <a class="item">
        Popular
      </a>
      <a class="item">
        About
      </a>

    </div>
  </div>

于是搜索参考文档如下

https://semantic-ui.qyears.com/modules/dropdown.php#/usage

https://stackoverflow.com/questions/25347315/semantic-ui-dropdown-menu-do-not-work

有如下两种用法

  • 使用Javascript初始化您的下拉列表
  • 使用simple 样式。

这两种方式之间有一个非常重要的区别：使用simple类，您不需要Semantic-UI Javascript来使您的下拉列表工作。本simple类使用:hover选择。

请注意，使用simple类（不是Javascript初始化）不会给你很好的下拉效果。

这是不使用JS的而用simple类的写法：

1
<div class="ui simple dropdown item">

如果不使用simple，则需要在使用下拉菜单前初始化

1
2
3
4
5
<script> 
     $(document).ready(function(){
          $('.ui.dropdown') .dropdown();
    });
    </script>

或

1
2
3
4
5
<script> 
     window.onload = (function(){
          $('.ui.dropdown') .dropdown();
    });
    </script>