Bootstrap中下拉菜單的實(shí)現(xiàn)方法

這篇文章將為大家詳細(xì)講解有關(guān)Bootstrap中下拉菜單的實(shí)現(xiàn)方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站建設(shè)、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元柯橋做網(wǎng)站,已為上家服務(wù),為柯橋各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

網(wǎng)頁交互的時(shí)候經(jīng)常會(huì)需要上下文菜單或者隱藏/顯示菜單項(xiàng)，Bootstrap默認(rèn)提供了用于顯示鏈接列表的可切換、有上下文的菜單。而且在各種交互狀態(tài)下的菜單展示需要和javascript插件配合才能使用。

使用方法

在使用Bootstrap框架的下拉菜單時(shí)，必須調(diào)用Bootstrap框架提供的bootstrap.js文件。當(dāng)然，如果使用的是未編譯版本，在js文件夾下能找到一個(gè)名為“dropdown.js”的文件，也可以調(diào)用這個(gè)js文件

因?yàn)锽ootstrap的組件交互效果都是依賴于jQuery庫寫的插件，所以在使用bootstrap.js之前一定要先加載jquery.js才會(huì)產(chǎn)生效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

基本用法

在使用Bootstrap框架中的下拉菜單組件時(shí)，其結(jié)構(gòu)運(yùn)用的正確與否非常的重要，如果結(jié)構(gòu)和類名未使用正確，直接影響組件是否能正常運(yùn)用

1、使用一個(gè)名為“dropdown”的容器包裹了整個(gè)下拉菜單元素

<div class="dropdown"></div>

2、使用了一個(gè)<button>按鈕做為父菜單，并且定義類名“dropdown-toggle”和自定義“data-toggle”屬性，且值必須和最外容器類名一致

<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">

3、下拉菜單項(xiàng)使用一個(gè)ul列表，并且定義一個(gè)類名為“dropdown-menu”

<ul class="dropdown-menu" role="menu">
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

Bootstrap中下拉菜單的實(shí)現(xiàn)方法

4、通過為下拉菜單的父元素設(shè)置 .dropup 類，可以讓菜單向上彈出（默認(rèn)是向下彈出的）

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

Bootstrap中下拉菜單的實(shí)現(xiàn)方法

原理分析

Bootstrap框架中的下拉菜單組件，其下拉菜單項(xiàng)默認(rèn)是隱藏的，因?yàn)椤癲ropdown-menu”默認(rèn)樣式設(shè)置了“display:none”；當(dāng)用戶點(diǎn)擊父菜單項(xiàng)時(shí)，下拉菜單將會(huì)被顯示出來；當(dāng)用戶再次點(diǎn)擊時(shí)，下拉菜單將繼續(xù)隱藏

.dropdown-menu {
  position: absolute;/*設(shè)置絕對(duì)定位，相對(duì)于父元素div.dropdown*/
  top: 100%;/*讓下拉菜單項(xiàng)在父菜單項(xiàng)底部，如果父元素不設(shè)置相對(duì)定位，該元素相對(duì)于body元素*/
  left: 0;
  z-index: 1000;/*讓下拉菜單項(xiàng)不被其他元素遮蓋住*/
  display: none;/*默認(rèn)隱藏下拉菜單項(xiàng)*/
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

【實(shí)現(xiàn)原理】

1、Dropdown插件在網(wǎng)頁加載的時(shí)候，對(duì)所有帶有data-toggle="dropdown"樣式的元素進(jìn)行事件綁定

2、用戶單擊帶有data-toggle="dropdown"樣式的鏈接或按鈕時(shí)，觸發(fā)javascript事件代碼

3、javascript事件代碼在父容器上加一個(gè).open樣式

4、默認(rèn)隱藏的.dropdown-menu菜單在外部有了.open樣式后，即可顯示出來，從而達(dá)到預(yù)期的效果

5、當(dāng)用戶再次點(diǎn)擊時(shí)，“p.dropdown”容器中的類名“open”又會(huì)被移除

.open > .dropdown-menu {
  display: block;
}

【其他用法】

還有一個(gè)有趣的用法，是觸發(fā)元素可以放在菜單的父容器的外部

但是，這種用法有兩點(diǎn)需要注意

1、要設(shè)置父容器的id值

2、要設(shè)置觸發(fā)元素的data-toggle屬性和data-target屬性，data-target屬性值是#id

<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" data-target="#dropdown1">外部觸發(fā)器</button>
<div class="dropdown" id="dropdown1">
    <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
        <li role="presentation"><a href="##">HTML</a></li>
        <li role="presentation"><a href="##">CSS</a></li>
        <li role="presentation"><a href="##">javascript</a></li>
    </ul>
</div>

Bootstrap中下拉菜單的實(shí)現(xiàn)方法

擴(kuò)展用法

【分隔線】

在Bootstrap框架中的下拉菜單提供了下拉分隔線，假設(shè)下拉菜單有兩個(gè)組，那么組與組之間可以通過添加一個(gè)空的<li>，并且給這個(gè)<li>添加類名“divider”來實(shí)現(xiàn)添加下拉分隔線的功能

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
<li role="separator" class="divider"></li>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Bootstrap中下拉菜單的實(shí)現(xiàn)方法

【菜單標(biāo)題】

在任何下拉菜單中均可通過添加標(biāo)題來標(biāo)明一組動(dòng)作

<li class="dropdown-header">Dropdown header</li>
.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999;
}
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="dropdown-header">第一部分菜單頭部</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="dropdown-header">第二部分菜單頭部</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
  </ul>
</div>

Bootstrap中下拉菜單的實(shí)現(xiàn)方法

【對(duì)齊方式】

Bootstrap框架中下拉菜單默認(rèn)是左對(duì)齊，如果想讓下拉菜單相對(duì)于父容器右對(duì)齊時(shí)，可以在“dropdown-menu”上添加一個(gè)“dropdown-menu-right”類名

.dropdown-menu-right {
  right: 0;
  left: auto;
}

由于<div class="dropdown">默認(rèn)是塊級(jí)元素，撐滿父級(jí)寬度。這里，需要為該元素設(shè)置inline-block和margin-left，使其內(nèi)容撐開寬度，且距離左側(cè)有一定距離

    display: inline-block;
    margin-left: 60px;
<div class="dropdown" style="display: inline-block;margin-left: 60px;">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
  </ul>
</div>

Bootstrap中下拉菜單的實(shí)現(xiàn)方法

【菜單項(xiàng)狀態(tài)】

下拉菜單項(xiàng)的默認(rèn)的狀態(tài)有懸浮狀態(tài)（:hover）和焦點(diǎn)狀態(tài)（:focus）

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

下拉菜單項(xiàng)除了上面兩種狀態(tài)，還有當(dāng)前狀態(tài)（.active）和禁用狀態(tài)（.disabled）。這兩種狀態(tài)使用方法只需要在對(duì)應(yīng)的菜單項(xiàng)上添加對(duì)應(yīng)的類名

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
  </ul>
</div>

Bootstrap中下拉菜單的實(shí)現(xiàn)方法

JS觸發(fā)

和模態(tài)彈出窗一樣，Bootstrap框架中的下拉菜單也支持JavaScript方法觸發(fā)下拉菜單顯示。但是，要特點(diǎn)注意的是，即使使用JS觸發(fā)，也不能去掉觸發(fā)元素的data-toggle="dropdown"

<div class="dropdown">
    <button class="btn dropdown-toggle" data-toggle="dropdown" type="button">觸發(fā)器</button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
        <li role="presentation"><a href="##">HTML</a></li>
        <li role="presentation"><a href="##">CSS</a></li>
        <li role="presentation"><a href="##">javascript</a></li>
    </ul>
</div>
<script>
;$(function(){
    $('.dropdown-toggle').dropdown()
});
</script>

Bootstrap中下拉菜單的實(shí)現(xiàn)方法

【toggle】

和Modal一樣，dropdown也接收字符串作為參數(shù)進(jìn)行傳遞，參數(shù)可以是"toggle"

但是，這非常不好用。每次單擊都要兩次toggle，就會(huì)一直是一個(gè)不變的狀態(tài)。所以，一般情況下，使用不帶參數(shù)的方法。就算需要使用參數(shù)“toggle”，也建議使用jQuery的one方法

$(".dropdown-toggle").one("click",function(){
    $(this).dropdown("toggle");
})

【事件訂閱】

與Modal類似，下拉菜單支持4種類型的事件訂閱，分別對(duì)應(yīng)下拉菜單的彈出前、彈出后、關(guān)閉前、關(guān)閉后

show.bs.dropdown 在show方法調(diào)用時(shí)立即觸發(fā)(尚未顯示之前)
shown.bs.dropdown 在下拉菜單完全顯示給用戶之后(并且等CSS動(dòng)畫完成之后)觸發(fā)
hide.bs.dropdown 在hide方法調(diào)用時(shí)(但還未關(guān)閉隱藏)立即觸發(fā)
hidden.bs.dropdown 在下拉菜單完全隱藏之后(并且等CSS動(dòng)畫完成之后)觸發(fā)
<div class="dropdown">
    <button class="btn dropdown-toggle" data-toggle="dropdown" type="button">觸發(fā)器</button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
        <li role="presentation"><a href="##">HTML</a></li>
        <li role="presentation"><a href="##">CSS</a></li>
        <li role="presentation"><a href="##">javascript</a></li>
    </ul>
</div>
<script>
;$(function(){
    $('.dropdown').on('show.bs.dropdown',function(){
        $('.dropdown-toggle').html('關(guān)閉');
    });
    $('.dropdown').on('hide.bs.dropdown',function(){
        $('.dropdown-toggle').html('打開');
    });
    
});
</script>

Bootstrap中下拉菜單的實(shí)現(xiàn)方法

JS源碼

【1】IIFE

使用立即調(diào)用函數(shù)，防止插件內(nèi)代碼外泄，從而形成一個(gè)閉環(huán)，并且只能從jQuery的fn里進(jìn)行擴(kuò)展

+function ($) {
    //使用es5嚴(yán)格模式
    'use strict';
    //
}(window.jQuery);

【2】初始設(shè)置

//彈出下拉菜單時(shí)的蒙版樣式
  var backdrop = '.dropdown-backdrop'
  //dropdown觸發(fā)元素的自定義屬性
  var toggle   = '[data-toggle="dropdown"]'
  var Dropdown = function (element) {
    //插件類函數(shù)定義，一旦觸發(fā)，就在click事件上綁定toggle，所以不能再用自定義代碼進(jìn)行toggle了
    $(element).on('click.bs.dropdown', this.toggle)
  }
  //版本號(hào)為'3.3.7'
  Dropdown.VERSION = '3.3.7'

【3】插件核心代碼

//獲取下拉菜單的父元素容器
  function getParent($this) {
    //獲取觸發(fā)元素的'data-target'特性值，表示下拉菜單的父元素容器的選擇器
    var selector = $this.attr('data-target')  
    //如果觸發(fā)元素沒有設(shè)置'data-target'
    if (!selector) {
      //獲取觸發(fā)元素的'href'特性值，表示下拉菜單的父元素容器的選擇器
      selector = $this.attr('href')
      //該值是所彈出元素的id值
      selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
    }
    //通過選擇器，來獲取下拉菜單的父元素容器
    var $parent = selector && $(selector)
    //如果找到，說明觸發(fā)元素確實(shí)在下拉菜單外部，則返回找到的下拉菜單的父元素容器即可
    //如果沒有找到，說明觸發(fā)元素在下拉菜單內(nèi)部，則返回它的直接父級(jí)元素
    return $parent && $parent.length ? $parent : $this.parent()
  }

  //關(guān)閉所有的下拉菜單
  function clearMenus(e) {
    //如果點(diǎn)擊的是鼠標(biāo)右鍵，則直接返回
    if (e && e.which === 3) return
    //刪除用于移動(dòng)設(shè)備的蒙版  
    $(backdrop).remove()
    //根據(jù)選擇器，遍歷所有的dropdown標(biāo)記，然后全部關(guān)閉
    $(toggle).each(function () {
      var $this         = $(this)
      var $parent       = getParent($this)
      var relatedTarget = { relatedTarget: this }
      //如果下拉菜單的父元素容器沒有open類名，則直接返回
      if (!$parent.hasClass('open')) return
      //如果觸發(fā)了鼠標(biāo)單擊事件，并且鼠標(biāo)事件的目標(biāo)元素是input或textarea，則直接返回
      if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return
      //關(guān)閉前，觸發(fā)hide事件
      $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
      //如果阻止了默認(rèn)行為，則直接返回
      if (e.isDefaultPrevented()) return
      $this.attr('aria-expanded', 'false')
      //關(guān)閉后，觸發(fā)hidden事件
      $parent.removeClass('open').trigger($.Event('hidden.bs.dropdown', relatedTarget))
    })
  }
  
  //控制下拉菜單的打開、關(guān)閉操作
  Dropdown.prototype.toggle = function (e) {
    var $this = $(this)
    //如果有禁用標(biāo)記，則不處理
    if ($this.is('.disabled, :disabled')) return
    //獲取下拉菜單的父元素容器
    var $parent  = getParent($this)
    //判斷下拉菜單的父元素容器是否有open樣式
    var isActive = $parent.hasClass('open')
    //關(guān)閉所有的下拉菜單
    clearMenus()
    //如果是，在clearMenus階段已經(jīng)關(guān)閉了，所以不需要再次關(guān)閉
    //如果不是，說明默認(rèn)是關(guān)閉狀態(tài)，則需要展開下拉菜單
    if (!isActive) {
      //如果是移動(dòng)設(shè)置，則使用dropdown-backdrop樣式，因?yàn)橐苿?dòng)設(shè)備不支持click單擊委托
      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {       
        $(document.createElement('div'))
          .addClass('dropdown-backdrop')
          .insertAfter($(this))
          .on('click', clearMenus)
      }
      var relatedTarget = { relatedTarget: this }
      //展開下拉菜單前，觸發(fā)show事件
      $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
      //如果阻止了默認(rèn)行為，則直接返回
      if (e.isDefaultPrevented()) return

      $this
        //設(shè)置focus樣式
        .trigger('focus')
        .attr('aria-expanded', 'true')

      $parent
        //設(shè)置open樣式
        .toggleClass('open')
        //展開下拉菜單后，觸發(fā)shown事件
        .trigger($.Event('shown.bs.dropdown', relatedTarget))
    }
    return false
  }

  //利用鍵盤控制下拉菜單
  Dropdown.prototype.keydown = function (e) {
    //如果按鍵不是esc、或上下方向鍵、或空格鍵，或者目標(biāo)元素是input或textarea控件，則忽略處理
    if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
    var $this = $(this)
    //阻止默認(rèn)行為及冒泡
    e.preventDefault()
    e.stopPropagation()
    //如果有禁用標(biāo)記，則不做處理
    if ($this.is('.disabled, :disabled')) return
    //獲取下拉菜單的父元素容器
    var $parent  = getParent($this)
    //判斷父元素是否有open樣式
    var isActive = $parent.hasClass('open')
    //如果有open樣式并且按鍵不是向下箭頭，或者沒有open樣式并且按鍵是向下箭頭，也打開下拉菜單
    if (!isActive && e.which != 27 || isActive && e.which == 27) {
      //如果按下向下箭頭，則給觸發(fā)元素加上焦點(diǎn)
      if (e.which == 27) $parent.find(toggle).trigger('focus')
      //觸發(fā)單擊事件
      return $this.trigger('click')
    }
    //返回可以利用箭頭選擇的下拉菜單項(xiàng)
    //必須是可見的a鏈接，并且不包括分隔符
    var desc = ' li:not(.disabled):visible a'
    var $items = $parent.find('.dropdown-menu' + desc)
    //如果沒有，則不做處理
    if (!$items.length) return
    //找出當(dāng)前處理焦點(diǎn)狀態(tài)的第一個(gè)下拉菜單項(xiàng)的索引
    var index = $items.index(e.target)
    //按向上箭頭，index-1
    if (e.which == 38 && index > 0)                 index--        
    //按向下箭頭，index+1 
    if (e.which == 40 && index < $items.length - 1) index++      
    //當(dāng)index為-1時(shí)，置為0  
    if (!~index)                                    index = 0
    //給所選擇的菜單項(xiàng)設(shè)置焦點(diǎn)
    $items.eq(index).trigger('focus')
  }

【4】jQuery插件定義

function Plugin(option) {
    //根據(jù)選擇器，遍歷所有符合規(guī)則的元素
    return this.each(function () {
      var $this = $(this)
      //獲取自定義屬性bs.dropdown的值
      var data  = $this.data('bs.dropdown')
      //如果值不存在，則將Dropdown實(shí)例設(shè)置為bs.dropdown值
      if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
      //如果option傳遞了string，則表示要執(zhí)行某個(gè)方法  
      if (typeof option == 'string') data[option].call($this)
    })
  }

  var old = $.fn.dropdown
  //保留其他庫的$.fn.modal代碼(如果定義的話)，以便在noConflict之后可以繼續(xù)使用該老代碼
  $.fn.dropdown             = Plugin
  //重設(shè)插件構(gòu)造器，可以通過該屬性獲取插件的真實(shí)類函數(shù)
  $.fn.dropdown.Constructor = Dropdown

【5】防沖突處理

$.fn.dropdown.noConflict = function () {
    //恢復(fù)以前的舊代碼
    $.fn.dropdown = old
    //將$.fn.dropdown.noConflict()設(shè)置為Bootstrap的Dropdown插件
    return this
  }

【6】綁定觸發(fā)事件

$(document)
    //為聲明式的HTML綁定單擊事件，在單擊以后先關(guān)閉所有的下拉菜單
    .on('click.bs.dropdown.data-api', clearMenus)
    //如果內(nèi)部有form元素，則阻止冒泡，不做其他處理
    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
    //綁定單擊事件，執(zhí)行toggle()方法
    .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
    //綁定鍵盤keydown事件，執(zhí)行keydown()方法
    .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
    //為dropdown-menu綁定鍵盤keydown事件，執(zhí)行keydown()方法
    .on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)

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

新聞標(biāo)題：Bootstrap中下拉菜單的實(shí)現(xiàn)方法
標(biāo)題URL：http://muchs.cn/article0/jchdoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、營銷型網(wǎng)站建設(shè)、商城網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司、企業(yè)建站、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司