Bootstrap下拉 - 點擊後消失

Question

當我點擊身體或導航欄時，如何關閉下拉菜單消失？

它應該在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> 

感謝這麼多的幫助。

Answer 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/