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