标签：
先上一下自己写的源代码：
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了还是不管用。
原因是什么呢？其实是以下原因：
占位区未显示！
恩，说完原因，其实这种问题，完全是可以通过布局来避免的啊！再回头看看文章顶部贴出来的代码，不觉得这代码有点扭曲吗？下次再碰到这样的需求，还会如此来布局吗？
嗯，长了记性就行了！
标签：
原文地址：http://www.cnblogs.com/newh5/p/5823227.html
