下拉列表dropdown取消默认点击隐藏的方法

angular-ui专门为Angular项目提供了dropdown控件，指令形式为uib-dropdown。

但是有的时候我们不希望点击下拉框的内容后，下拉框就隐藏。比如，如果下拉框内容是一个折叠列表之类的话，当我们点开列表后下拉框就隐藏了，而此时我们还没有选择我们要选择的元素。

基于这种情况，我们需要对下拉框进行更多的控制。

我们整体的结构可能是这样的：

div(uib-dropdown) 
    button.btn.btn-default(uib-dropdown-toggle)
        span(ng-bind="someModel")
        span.caret
    ul.dropdown-menu-right.model-group-list(uib-dropdown-menu) 
        li 
            div(tree-group="{{tree}}")

直接把jade文件搬来了。。可以大概看出HTML结构，uib-dropdown是angular中的指令，可以把他看作实现了Bootstrap中的dropdown控件，当点击button时，下拉框会弹出，其中包含了一个树结构列表。

取消下拉框默认点击隐藏的方法：

$(".model-group-list *").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});

取消了所有的元素点击事件，如此一来当我们点击下拉框列表中的任何内容下拉框都不会隐藏了，除非我们点击外部元素或者点击button。

这样做也有一个问题，就是如果我们想当我们选中特性元素后下拉框就隐藏，那么你可能需要这样做：

$($event.currentTarget).closest(".dropdown").removeClass("open");

点击某个特定元素后向上找寻最近的.dropdown 父元素，移除他的open class。

这样做也确实可以实现点击某些特定的元素下拉框隐藏，但是遇到个奇葩的问题，就是隐藏后再点击Button需要点击Button按钮两次才可以打开下拉框。

打开控制台观察正常情况的下拉框属性变化会发现还有个aria-expanded 属性，它会随着下拉框的打开隐藏变为true或者false，类似open class，直接的想法就是改变他的属性不就得了？

所以我们可以接着上述的代码继续改动其中的属性：

$($event.currentTarget).closest(".dropdown").removeClass("open").find(".dropdown-toggle").attr("aria-expanded",false);

大功告成了吗？并没有。。

我们这样做了之后下拉框确实隐藏了，并且查看DOM时，aria-expanded 也确实变为了false，但是依旧存在着下拉框二次点击的BUG。

啊，要疯了，求助Google和StackOverflow吧，嗯，找到一个办法。

如是说：

额，不知网速太差还是被墙了，明天去公司在来改一下吧，sorry

不过方式我还是记着的：

div(uib-dropdown) 
    button.btn.btn-default(uib-dropdown-toggle data-disabled="true" data-toggle="dropdown")
        span(ng-bind="someModel")
        span.caret
    ul.dropdown-menu-right.model-group-list(uib-dropdown-menu) 
        li 
            div(tree-group="{{tree}}")

我们在按钮后多加了两个属性，data-disabled="true" 和 data-toggle="dropdown"。

Orz，问题解决了，细心的朋友可以试着将刚才说的可能的一些无用的代码删掉试试，看看哪些才是必要的代码。

另外一些运行截图明天在附上吧。。

---

此文档的作者：justforuse
Github Pages：justforuse