用bootstrop的dropdown遇到的坑

先上一下自己写的源代码：

<div class="form-group amount">
                    <label for="amount" class=" control-label">充值金额</label>
                    <input type="text" class="form-control" id="amount" placeholder="">
                    <span class="tips">1RMB=1鱼币</span>
                    <p class="msg-error">错误信息</p>
                    <div class="dropdown">
                        <span class="arrow" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
                        <div class="dropdown-menu">
                            <ul>
                                <li>1RMB</li>
                                <li>5RMB</li>
                                <li>10RMB</li>
                                <li>20RMB</li>
                                <li>50RMB</li>
                                <li>100RMB</li>
                                <li>200RMB</li>
                                <li>500RMB</li>
                                <li>1000RMB</li>
                            </ul>
                        </div>
                    </div>
                </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了还是不管用。

　　原因是什么呢？其实是以下原因：

　　具体原因我也没找到，使用focus事件、mousedown事件、mouseup事件都不行，在尝试中发现用click事件+return false竟然有效。恩，这也是个解决办法吧。

　　恩，说完原因，其实这种问题，完全是可以通过布局来避免的啊！再回头看看文章顶部贴出来的代码，不觉得这代码有点扭曲吗？下次再碰到这样的需求，还会如此来布局吗？

　　嗯，长了记性就行了！