2016-11-09 74 views
1

当我点击身体或导航栏时,如何关闭下拉菜单消失?Bootstrap下拉 - 点击后消失

它应该在bootstrap的js文件中,我该怎么办?

HTML代码:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 

感谢这么多的帮助。

回答

1

这里是解决方案:

//Attaching event handler to .dropdown selector. 
$('.dropdown').on({ 

    //fires after dropdown is shown instance method is called.(if you click //anywhere else) 
    "shown.bs.dropdown": function() { this.close= false; }, 

    //when dropdown is clicked 
    "click": function() { this.close= true; }, 

//when close event is triggered 
    "hide.bs.dropdown": function() { return this.close; } 
}); 

我会存入凯尔的解决方案,这里是他的jsfiddle链接: https://jsfiddle.net/KyleMit/ZS4L7/

+0

我应该创建自定义的script.js文件,是吗? – Giacomo

+0

你需要首先包含jquery,如果你愿意,你可以添加自定义的js文件,或者用脚本标签将它添加到html文件中。但确保你有jquery依赖关心。 。 –

+0

大声笑没关系它的引导,我相信你已经有jQuery链接:) –