今天学习了semantic ui框架来做前端设计,当需要在菜单里用到下拉框时发现,不管怎么修改,点击下拉框都没有反应。
<div class="ui floating dropdown labeled search icon item">
<i class="world icon"></i>
<span class="center aligned text">选择分类</span>
<div class="menu">
<div class="item">娱乐</div>
<div class="item">科技</div>
<div class="item">人文</div>
</div>
</div>
为了解决这个问题,找了两种办法。
第一种办法:
注意:在使用semantic的下拉框的时候,不仅需要引入semantic.css,还要引入semantic.js,最重要的是引入jquery。否则下拉效果不会显示。
并且,jquery必须先于semantic.js引入,因为semantic.js需要用到jquery。
转自https://blog.csdn.net/JOKER0707/article/details/101569823
但是亲测无效
第二种办法:需要自己去初始化,在js文件中加入
$(".ui.dropdown").dropdown();
<script type="text/javascript">
$(".ui.dropdown").dropdown();
</script>