bootstrap源码学习与示例：bootstrap-dropdown（转帖）

bootstrap-dropdown组件是个烂东西，我读后的整体感觉。

一个下拉开菜单的设计：

                  <ul class="nav pull-right">
                        <li id="fat-menu" class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉 <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">动作</a></li>
                                <li><a href="#">另一个动作</a></li>
                                <li><a href="#">其他</a></li>
                                <li class="divider"></li>
                                <li><a href="#">另一个链接</a></li>
                            </ul>
                        </li>
                    </ul>

首先下拉开菜单其中就是当中第二层的UL元素，类名为dropdown-menu。下拉菜单通常处于隐藏状态。我们可以在它的父元素上加个open类名，让它显示出来。它的父元素通常带个dropdown类名，其实是提供了一个相对定位的包含块。当然除了dropdown外，你还可以选择用dropup。dropdown是让下拉菜单向下显示，dropup是向上展示。要打开下拉菜单，通常我们要点击某处让它显示出来。我们称之为触发器。这个触发器带一个data-toggle=dropdown的自定义属性。通过前面的学习，你们应该隐约察觉到，data-toggle在bootstrap有特殊意义，是让目标对象表现某一类控件，什么data-toggle=button,data-toggle=buttons-checked,data-toggle=radio……不过它还有专门的类名dropdown-toggle。触发器可以通过data-target自定义属性指定目标下拉框打开，也可以通过href属性打开。不过bootstrap的下拉框有严重的排它性，一个页面只能打开一个下拉框，也无法通过套嵌组建多级下拉框。

ps：判断是否隐藏：

        if($("#subEarlySettlementCostValue").is(":hidden")){

            $("#subEarlySettlementCostValue").show();

        }else if($("#subEarlySettlementCostValue").is(":visible")){

            $("#subEarlySettlementCostValue").hide();

        }