bootstrap下拉菜單無(wú)法隱藏怎么辦

這篇文章將為大家詳細(xì)講解有關(guān)bootstrap下拉菜單無(wú)法隱藏怎么辦，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

下拉菜單的兩種實(shí)現(xiàn)

想必大家都知道，bootstrap為我們提供了一個(gè)下拉菜單的組件，官方也為我們提供兩種使用方法

1.標(biāo)簽指定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" >數(shù)據(jù)挖掘</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" >數(shù)據(jù)通信/網(wǎng)絡(luò)</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調(diào)用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" >數(shù)據(jù)挖掘</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" >數(shù)據(jù)通信/網(wǎng)絡(luò)</a>
    </li>
  </ul>
<button id="test">test</button>
</div>
</body>

<script>
  $(function() {
    $("#test").click(function() {
      $(".dropdown-toggle").dropdown('toggle');
    })
  })
</script>

第二種方法有個(gè)很嚴(yán)重的問(wèn)題

就是，下拉菜單開(kāi)啟后，官方并沒(méi)有提供將它隱藏的方法，網(wǎng)上的方法死活說(shuō)再次調(diào)用dropdown(‘toggle')。。。反正我不行。

那么我想用點(diǎn)擊之外來(lái)開(kāi)啟下拉菜單呢？（必須得使用JS來(lái)控制）

我想到一個(gè)方法，使用jQuery提供的一個(gè)效果slideUp(),slideDown()

<body>
<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" >數(shù)據(jù)挖掘</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" >數(shù)據(jù)通信/網(wǎng)絡(luò)</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>
<button id="test">test</button>
<button id="test1">test1</button>
</div>
</body>
<script>
  $(function() {
    $("#test").click(function() {
      $(".dropdown-menu").slideUp();
    })
    $("#test1").click(function() {
      $(".dropdown-menu").slideDown();
    })
  })
</script>

好了現(xiàn)在能實(shí)現(xiàn)開(kāi)和關(guān)了，但是速度有點(diǎn)慢？沒(méi)事slide可以通過(guò)參數(shù)調(diào)節(jié)速度甚至還有回調(diào)函數(shù)來(lái)替代$(selector).on("hidden.bs.dropdown', function () {})（對(duì)下拉菜單收回時(shí)間的監(jiān)聽(tīng)），滿分！

$(selector).slideUp(speed,callback)

speed 可選。規(guī)定元素從可見(jiàn)到隱藏的速度（或者相反）。默認(rèn)為 “normal”。 可能的值：

毫秒 （比如 1500）

“slow”
“normal”
“fast”

在設(shè)置速度的情況下，元素從可見(jiàn)到隱藏的過(guò)程中，會(huì)逐漸地改變其高度（這樣會(huì)創(chuàng)造滑動(dòng)效果）。

callback

可選。slideUp 函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。 除非設(shè)置了 speed 參數(shù)，否則不能設(shè)置該參數(shù)。

關(guān)于“bootstrap下拉菜單無(wú)法隱藏怎么辦”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。