您的位置:首页 > 产品设计 > UI/UE

解决semanticUI下拉框、popup等一系列模块无法展示效果问题

2020-07-04 14:05 190 查看

在使用semanticUI,初期忽视了一个小细节,认为无关紧要,导致后面使用popup组件无效果,卡了一天,最后使用了绝对位置来代替。后面使用下拉框也失效,忍无可忍,就硬肝!

代码没毛病。

[code]<div class="ui fluid multiple search selection dropdown">
<input type="hidden" name="country">
<i class="dropdown icon"></i>
<div class="default text">选择国家</div>
<div class="menu">
<div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
<div class="item" data-value="ax"><i class="ax flag"></i>Aland Islands</div>
<div class="item" data-value="al"><i class="al flag"></i>Albania</div>
</div>
</div>

最后发现是引入的jq和semantic.js顺序不对。。。

 

因为使用semantic的一些组件需要用到jq,所以必须要在semantic.js前引入jq,调换顺序后完美解决。

 

最后也提醒一点,使用semantic的下拉框需要先初始化模块。

[code]<script>
$('.ui.dropdown').dropdown();
</script>

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐