首页 > 代码库 > 用bootstrop的dropdown遇到的坑
用bootstrop的dropdown遇到的坑
先上一下自己写的源代码：
1 <div class="form-group amount"> 2 <label for="amount" class=" control-label">充值金额</label> 3 <input type="text" class="form-control" id="amount" placeholder=""> 4 <span class="tips">1RMB=1鱼币</span> 5 <p class="msg-error">错误信息</p> 6 <div class="dropdown"> 7 <span class="arrow" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span> 8 <div class="dropdown-menu"> 9 <ul>10 <li>1RMB</li>11 <li>5RMB</li>12 <li>10RMB</li>13 <li>20RMB</li>14 <li>50RMB</li>15 <li>100RMB</li>16 <li>200RMB</li>17 <li>500RMB</li>18 <li>1000RMB</li>19 </ul>20 </div>21 </div>22 </div>
根据效果图，应该点击.arrow让dropdown显示出来，所以就如上部局了。
坑一：用js来手动调出dropdown；
我想的是当点击到input上时，就应该显示出dropdown，这样才更符合人的体验嘛，所以我就把focus事件往input上加，想让它focus时显示出来。结果，就是怎样都出不来。
官网示例的调用方法是这样的：
$(‘.dropdown-toggle‘).dropdown()
于是我也这样来调，可dropdown一直都无动于衷，看来是我的选择器有了问题，然后我就开始了各种尝试，比如这样：
$(‘.amount ‘).dropdown()//这样……$(‘.amount .dropdown‘).dropdown()//这样……$(‘.amount .dropdown-menu‘).dropdown()
结果就是不行嘛，最后，我发现正确的应该是这样的：
$(‘.amount .dropdown-toggle‘).dropdown(‘toggle‘)
当然，前提是把.arrow的class身上再加上.dropdown-toggle的class。就是这样：
<span class="arrow dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
没人跟我说过.dropdown-toggle是必须的啊！！ 好吧，是我学习的时候不认真，使用的时候太粗心！
坑二、focus事件时dropdown闪显闪退；
具体的病症应该时focus事件的mousedown会显示，当mouseup会消失，这是什么道理？冒泡？默认行为？加上了preventdefault和stoppropagation不管用，我都return false了还是不管用。
原因是什么呢？其实是以下原因：
占位区未显示！
恩，说完原因，其实这种问题，完全是可以通过布局来避免的啊！再回头看看文章顶部贴出来的代码，不觉得这代码有点扭曲吗？下次再碰到这样的需求，还会如此来布局吗？
嗯，长了记性就行了！
用bootstrop的dropdown遇到的坑
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。