下拉列表dropdown取消默认点击隐藏及修复需要二次点击的方法

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

                       

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}}")
  
  
  

   
1
   
2
   
3
   
4
   
5
   
6
   
7
  

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

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

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

   
1
   
2
   
3
   
4
   
5
  

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

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

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

   
1
  

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

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

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

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

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

   
1
  

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

我们这样做了之后下拉框确实隐藏了，并且查看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