亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

快速解決bootstrap下拉菜單無法隱藏的問題

 更新時間：2018年08月10日 10:26:11   作者：CalicoBox  
今天小編就為大家分享一篇快速解決bootstrap下拉菜單無法隱藏的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

想必大家都知道，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" >數(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)絡</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)絡</a>
    </li>
  </ul>
<button id="test">test</button>
</div>
</body>

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

第二種方法有個很嚴重的問題

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

那么我想用點擊之外來開啟下拉菜單呢？（必須得使用JS來控制）

我想到一個方法，使用jQuery提供的一個效果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)絡</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)在能實現(xiàn)開和關(guān)了，但是速度有點慢？沒事slide可以通過參數(shù)調(diào)節(jié)速度甚至還有回調(diào)函數(shù)來替代$(selector).on("hidden.bs.dropdown', function () {})（對下拉菜單收回時間的監(jiān)聽），滿分！

$(selector).slideUp(speed,callback)

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

毫秒 （比如 1500）

“slow”
“normal”
“fast”

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

callback

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

以上這篇快速解決bootstrap下拉菜單無法隱藏的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • js窗口震動小程序分享

    js窗口震動小程序分享

    這篇文章主要為大家分享了js窗口震動小程序,可設置抖動的頻率，范圍，和次數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-11-11
  • javascript阻止瀏覽器后退事件防止誤操作清空表單

    javascript阻止瀏覽器后退事件防止誤操作清空表單

    由于誤操作比較多，有時沒有選中文本框，然后不小心按了退格之后，剛剛辛苦填好的表單就什么也后退的沒有了，針對這個問題，本文給出了詳細的解決方法，需要朋友不要錯過
    2013-11-11
  • 添加、刪除HTML結(jié)點 & 上傳圖片預覽

    添加、刪除HTML結(jié)點 & 上傳圖片預覽

    添加、刪除HTML結(jié)點 & 上傳圖片預覽...
    2006-10-10
  • JavaScript高級程序設計 閱讀筆記（十五） 瀏覽器中的JavaScript

    JavaScript高級程序設計 閱讀筆記（十五） 瀏覽器中的JavaScript

    Window對象對操作瀏覽器窗口非常有用，開發(fā)者可以移動或調(diào)整瀏覽器窗口的大小
    2012-08-08
  • 徹底弄懂 JavaScript 執(zhí)行機制

    徹底弄懂 JavaScript 執(zhí)行機制

    不論你是javascript新手還是老鳥，不論是面試求職，還是日常開發(fā)工作，我們經(jīng)常會遇到這樣的情況：給定的幾行代碼，我們需要知道其輸出內(nèi)容和順序。接下來通過本文給大家分享 JavaScript 執(zhí)行機制，感興趣的朋友一起看看吧
    2018-10-10
  • javascript實現(xiàn)前端分頁效果

    javascript實現(xiàn)前端分頁效果

    這篇文章主要為大家詳細介紹了javascript實現(xiàn)前端分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-06-06
  • Bootstrap學習筆記之css樣式設計(2)

    Bootstrap學習筆記之css樣式設計(2)

    這篇文章主要為大家詳細介紹了Bootstrap學習筆記之css樣式設計，感興趣的小伙伴們可以參考一下
    2016-06-06
  • Js遍歷鍵值對形式對象或Map形式的方法

    Js遍歷鍵值對形式對象或Map形式的方法

    下面小編就為大家?guī)硪黄狫s遍歷鍵值對形式對象或Map形式的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08
  • 小程序云開發(fā)實現(xiàn)數(shù)據(jù)庫異步操作同步化

    小程序云開發(fā)實現(xiàn)數(shù)據(jù)庫異步操作同步化

    這篇文章主要為大家詳細介紹了小程序云開發(fā)實現(xiàn)數(shù)據(jù)庫異步操作同步化，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-05-05
  • uniapp 獲取頁面來源及注意事項

    uniapp 獲取頁面來源及注意事項

    這篇文章主要介紹了uniapp 獲取頁面來源及注意事項,獲取當前頁面棧的實例,以數(shù)組形式按棧的順序給出,數(shù)組中的元素為頁面實例,第一個元素為首頁,最后一個元素為當前頁面,感興趣的朋友參考本文實例代碼
    2024-03-03

最新評論