快速解决bootstrap下拉菜单无法隐藏的问题

下拉菜单的两种实现

想必大家都知道，bootstrap为我们提供了一个下拉菜单的组件，官方也为我们提供两种使用方法

1.标签指定data-toggle

<div class="dropdown">  <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题    <span class="caret"></span>  </button>  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">    <li role="presentation">      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Java</a>    </li>    <li role="presentation">      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >数据挖掘</a>    </li>    <li role="presentation">      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >数据通信/网络</a>    </li>    <li role="presentation" class="divider"></li>    <li role="presentation">      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >分离的链接</a>    </li>  </ul></div>

2.js调用dropdown(‘toggle')方法

<div class="dropdown">  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" id="dropdownMenu1" >    主题    <span class="caret"></span>  </a>  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">    <li role="presentation">      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Java</a>    </li>    <li role="presentation">      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >数据挖掘</a>    </li>    <li role="presentation">      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >数据通信/网络</a>    </li>  </ul><button id="test">test</button></div></body><script>  $(function() {    $("#test").click(function() {      $(".dropdown-toggle").dropdown('toggle');    })  })</script>