下拉列表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吧，嗯，找到一个办法。

http://stackoverflow.com/questions/24218663/avoid-having-to-double-click-to-toggle-bootstrap-dropdown

https://github.com/angular-ui/bootstrap/issues/2294

如是说：



所以我们的代码改为：

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，问题解决了，细心的朋友可以试着将刚才说的可能的一些无用的代码删掉试试，看看哪些才是必要的代码。

效果图：



———————-分割线 8.25——————————-

我发现代码可以简化些：

jQuery($event.currentTarget).closest(".dropdown").toggleClass("open");

此文档的作者：justforuse

Github Pages：justforuse