Bootstrap下拉菜單 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　網頁交互的時候經常會需要上下文菜單或者隱藏/顯示菜單項，Bootstrap默認提供了用于顯示鏈接列表的可切換、有上下文的菜單。而且在各種交互狀態下的菜單展示需要和javascript插件配合才能使用。本文將詳細介紹Bootstrap下拉菜單

使用方法

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

　　因為Bootstrap的組件交互效果都是依賴于jQuery庫寫的插件，所以在使用bootstrap.js之前一定要先加載jquery.js才會產生效果

<!DOCTYPE html>
<html lang="en">
<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框架中的下拉菜單組件時，其結構運用的正確與否非常的重要，如果結構和類名未使用正確，直接影響組件是否能正常運用

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

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

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

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

　　3、下拉菜單項使用一個ul列表，并且定義一個類名為“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>

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

<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框架中的下拉菜單組件，其下拉菜單項默認是隱藏的，因為“dropdown-menu”默認樣式設置了“display:none”；當用戶點擊父菜單項時，下拉菜單將會被顯示出來；當用戶再次點擊時，下拉菜單將繼續隱藏

.dropdown-menu {
  position: absolute;/*設置絕對定位，相對于父元素div.dropdown*/
  top: 100%;/*讓下拉菜單項在父菜單項底部，如果父元素不設置相對定位，該元素相對于body元素*/
  left: 0;
  z-index: 1000;/*讓下拉菜單項不被其他元素遮蓋住*/
  display: none;/*默認隱藏下拉菜單項*/
  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);
}

【實現原理】

　　1、Dropdown插件在網頁加載的時候，對所有帶有data-toggle="dropdown"樣式的元素進行事件綁定

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

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

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

　　5、當用戶再次點擊時，“div.dropdown”容器中的類名“open”又會被移除

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

【其他用法】

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

　　但是，這種用法有兩點需要注意

　　1、要設置父容器的id值

　　2、要設置觸發元素的data-toggle屬性和data-target屬性，data-target屬性值是#id

<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" data-target="#dropdown1">外部觸發器</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框架中的下拉菜單提供了下拉分隔線，假設下拉菜單有兩個組，那么組與組之間可以通過添加一個空的<li>，并且給這個<li>添加類名“divider”來實現添加下拉分隔線的功能

.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>

【菜單標題】

　　在任何下拉菜單中均可通過添加標題來標明一組動作

<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="#">下拉菜單項</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="dropdown-header">第二部分菜單頭部</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
  </ul>
</div>

【對齊方式】

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

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

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

    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="#">下拉菜單項</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
  </ul>
</div>

【菜單項狀態】

　　下拉菜單項的默認的狀態有懸浮狀態（:hover）和焦點狀態（:focus）

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

　　下拉菜單項除了上面兩種狀態，還有當前狀態（.active）和禁用狀態（.disabled）。這兩種狀態使用方法只需要在對應的菜單項上添加對應的類名

<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="#">下拉菜單項</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
  </ul>
</div>

JS觸發

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

<div class="dropdown">
    <button class="btn dropdown-toggle" data-toggle="dropdown" type="button">觸發器</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>

【toggle】

　　和Modal一樣，dropdown也接收字符串作為參數進行傳遞，參數可以是"toggle"

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

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

【事件訂閱】

　　與Modal類似，下拉菜單支持4種類型的事件訂閱，分別對應下拉菜單的彈出前、彈出后、關閉前、關閉后

show.bs.dropdown 在show方法調用時立即觸發(尚未顯示之前)
shown.bs.dropdown 在下拉菜單完全顯示給用戶之后(并且等CSS動畫完成之后)觸發
hide.bs.dropdown 在hide方法調用時(但還未關閉隱藏)立即觸發
hidden.bs.dropdown 在下拉菜單完全隱藏之后(并且等CSS動畫完成之后)觸發

<div class="dropdown">
    <button class="btn dropdown-toggle" data-toggle="dropdown" type="button">觸發器</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('關閉');
    });
    $('.dropdown').on('hide.bs.dropdown',function(){
        $('.dropdown-toggle').html('打開');
    });
    
});
</script>

JS源碼

【1】IIFE

　　使用立即調用函數，防止插件內代碼外泄，從而形成一個閉環，并且只能從jQuery的fn里進行擴展

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

【2】初始設置

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

【3】插件核心代碼

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

  //關閉所有的下拉菜單
  function clearMenus(e) {
    //如果點擊的是鼠標右鍵，則直接返回
    if (e && e.which === 3) return
    //刪除用于移動設備的蒙版  
    $(backdrop).remove()
    //根據選擇器，遍歷所有的dropdown標記，然后全部關閉
    $(toggle).each(function () {
      var $this         = $(this)
      var $parent       = getParent($this)
      var relatedTarget = { relatedTarget: this }
      //如果下拉菜單的父元素容器沒有open類名，則直接返回
      if (!$parent.hasClass('open')) return
      //如果觸發了鼠標單擊事件，并且鼠標事件的目標元素是input或textarea，則直接返回
      if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return
      //關閉前，觸發hide事件
      $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
      //如果阻止了默認行為，則直接返回
      if (e.isDefaultPrevented()) return
      $this.attr('aria-expanded', 'false')
      //關閉后，觸發hidden事件
      $parent.removeClass('open').trigger($.Event('hidden.bs.dropdown', relatedTarget))
    })
  }
  
  //控制下拉菜單的打開、關閉操作
  Dropdown.prototype.toggle = function (e) {
    var $this = $(this)
    //如果有禁用標記，則不處理
    if ($this.is('.disabled, :disabled')) return
    //獲取下拉菜單的父元素容器
    var $parent  = getParent($this)
    //判斷下拉菜單的父元素容器是否有open樣式
    var isActive = $parent.hasClass('open')
    //關閉所有的下拉菜單
    clearMenus()
    //如果是，在clearMenus階段已經關閉了，所以不需要再次關閉
    //如果不是，說明默認是關閉狀態，則需要展開下拉菜單
    if (!isActive) {
      //如果是移動設置，則使用dropdown-backdrop樣式，因為移動設備不支持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 }
      //展開下拉菜單前，觸發show事件
      $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
      //如果阻止了默認行為，則直接返回
      if (e.isDefaultPrevented()) return

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

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

  //利用鍵盤控制下拉菜單
  Dropdown.prototype.keydown = function (e) {
    //如果按鍵不是esc、或上下方向鍵、或空格鍵，或者目標元素是input或textarea控件，則忽略處理
    if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
    var $this = $(this)
    //阻止默認行為及冒泡
    e.preventDefault()
    e.stopPropagation()
    //如果有禁用標記，則不做處理
    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) {
      //如果按下向下箭頭，則給觸發元素加上焦點
      if (e.which == 27) $parent.find(toggle).trigger('focus')
      //觸發單擊事件
      return $this.trigger('click')
    }
    //返回可以利用箭頭選擇的下拉菜單項
    //必須是可見的a鏈接，并且不包括分隔符
    var desc = ' li:not(.disabled):visible a'
    var $items = $parent.find('.dropdown-menu' + desc)
    //如果沒有，則不做處理
    if (!$items.length) return
    //找出當前處理焦點狀態的第一個下拉菜單項的索引
    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++      
    //當index為-1時，置為0  
    if (!~index)                                    index = 0
    //給所選擇的菜單項設置焦點
    $items.eq(index).trigger('focus')
  }

【4】jQuery插件定義

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

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

【5】防沖突處理

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

【6】綁定觸發事件

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