溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關(guān)Bootstrap中下拉菜單的實現(xiàn)方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
網(wǎng)頁交互的時候經(jīng)常會需要上下文菜單或者隱藏/顯示菜單項，Bootstrap默認提供了用于顯示鏈接列表的可切換、有上下文的菜單。而且在各種交互狀態(tài)下的菜單展示需要和javascript插件配合才能使用。
在使用Bootstrap框架的下拉菜單時，必須調(diào)用Bootstrap框架提供的bootstrap.js文件。當然，如果使用的是未編譯版本，在js文件夾下能找到一個名為“dropdown.js”的文件，也可以調(diào)用這個js文件
因為Bootstrap的組件交互效果都是依賴于jQuery庫寫的插件，所以在使用bootstrap.js之前一定要先加載jquery.js才會產(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框架中的下拉菜單組件時，其結(jié)構(gòu)運用的正確與否非常的重要，如果結(jié)構(gòu)和類名未使用正確，直接影響組件是否能正常運用
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、通過為下拉菜單的父元素設(shè)置 .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”默認樣式設(shè)置了“display:none”；當用戶點擊父菜單項時，下拉菜單將會被顯示出來；當用戶再次點擊時，下拉菜單將繼續(xù)隱藏
.dropdown-menu {
position: absolute;/*設(shè)置絕對定位，相對于父元素div.dropdown*/
top: 100%;/*讓下拉菜單項在父菜單項底部，如果父元素不設(shè)置相對定位，該元素相對于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);
}【實現(xiàn)原理】
1、Dropdown插件在網(wǎng)頁加載的時候，對所有帶有data-toggle="dropdown"樣式的元素進行事件綁定
2、用戶單擊帶有data-toggle="dropdown"樣式的鏈接或按鈕時，觸發(fā)javascript事件代碼
3、javascript事件代碼在父容器上加一個.open樣式
4、默認隱藏的.dropdown-menu菜單在外部有了.open樣式后，即可顯示出來，從而達到預(yù)期的效果
5、當用戶再次點擊時，“p.dropdown”容器中的類名“open”又會被移除
.open > .dropdown-menu {
display: block;
}【其他用法】
還有一個有趣的用法，是觸發(fā)元素可以放在菜單的父容器的外部
但是，這種用法有兩點需要注意
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è)下拉菜單有兩個組，那么組與組之間可以通過添加一個空的<li>，并且給這個<li>添加類名“divider”來實現(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>
【菜單標題】
在任何下拉菜單中均可通過添加標題來標明一組動作
<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">默認是塊級元素，撐滿父級寬度。這里，需要為該元素設(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="#">下拉菜單項</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>
【菜單項狀態(tài)】
下拉菜單項的默認的狀態(tài)有懸浮狀態(tài)（:hover）和焦點狀態(tài)（:focus）
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}下拉菜單項除了上面兩種狀態(tài)，還有當前狀態(tài)（.active）和禁用狀態(tài)（.disabled）。這兩種狀態(tài)使用方法只需要在對應(yīng)的菜單項上添加對應(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="#">下拉菜單項</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>
和模態(tài)彈出窗一樣，Bootstrap框架中的下拉菜單也支持JavaScript方法觸發(fā)下拉菜單顯示。但是，要特點注意的是，即使使用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>
【toggle】
和Modal一樣，dropdown也接收字符串作為參數(shù)進行傳遞，參數(shù)可以是"toggle"
但是，這非常不好用。每次單擊都要兩次toggle，就會一直是一個不變的狀態(tài)。所以，一般情況下，使用不帶參數(shù)的方法。就算需要使用參數(shù)“toggle”，也建議使用jQuery的one方法
$(".dropdown-toggle").one("click",function(){
$(this).dropdown("toggle");
})【事件訂閱】
與Modal類似，下拉菜單支持4種類型的事件訂閱，分別對應(yīng)下拉菜單的彈出前、彈出后、關(guān)閉前、關(guān)閉后
show.bs.dropdown 在show方法調(diào)用時立即觸發(fā)(尚未顯示之前) shown.bs.dropdown 在下拉菜單完全顯示給用戶之后(并且等CSS動畫完成之后)觸發(fā) hide.bs.dropdown 在hide方法調(diào)用時(但還未關(guān)閉隱藏)立即觸發(fā) hidden.bs.dropdown 在下拉菜單完全隱藏之后(并且等CSS動畫完成之后)觸發(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>
【1】IIFE
使用立即調(diào)用函數(shù)，防止插件內(nèi)代碼外泄，從而形成一個閉環(huán)，并且只能從jQuery的fn里進行擴展
+function ($) {
//使用es5嚴格模式
'use strict';
//
}(window.jQuery);【2】初始設(shè)置
//彈出下拉菜單時的蒙版樣式
var backdrop = '.dropdown-backdrop'
//dropdown觸發(fā)元素的自定義屬性
var toggle = '[data-toggle="dropdown"]'
var Dropdown = function (element) {
//插件類函數(shù)定義，一旦觸發(fā)，就在click事件上綁定toggle，所以不能再用自定義代碼進行toggle了
$(element).on('click.bs.dropdown', this.toggle)
}
//版本號為'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ā)元素確實在下拉菜單外部，則返回找到的下拉菜單的父元素容器即可
//如果沒有找到，說明觸發(fā)元素在下拉菜單內(nèi)部，則返回它的直接父級元素
return $parent && $parent.length ? $parent : $this.parent()
}
//關(guān)閉所有的下拉菜單
function clearMenus(e) {
//如果點擊的是鼠標右鍵，則直接返回
if (e && e.which === 3) return
//刪除用于移動設(shè)備的蒙版
$(backdrop).remove()
//根據(jù)選擇器，遍歷所有的dropdown標記，然后全部關(guān)閉
$(toggle).each(function () {
var $this = $(this)
var $parent = getParent($this)
var relatedTarget = { relatedTarget: this }
//如果下拉菜單的父元素容器沒有open類名，則直接返回
if (!$parent.hasClass('open')) return
//如果觸發(fā)了鼠標單擊事件，并且鼠標事件的目標元素是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))
//如果阻止了默認行為，則直接返回
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)
//如果有禁用標記，則不處理
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)閉
//如果不是，說明默認是關(guān)閉狀態(tài)，則需要展開下拉菜單
if (!isActive) {
//如果是移動設(shè)置，則使用dropdown-backdrop樣式，因為移動設(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))
//如果阻止了默認行為，則直接返回
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、或上下方向鍵、或空格鍵，或者目標元素是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) {
//如果按下向下箭頭，則給觸發(fā)元素加上焦點
if (e.which == 27) $parent.find(toggle).trigger('focus')
//觸發(fā)單擊事件
return $this.trigger('click')
}
//返回可以利用箭頭選擇的下拉菜單項
//必須是可見的a鏈接，并且不包括分隔符
var desc = ' li:not(.disabled):visible a'
var $items = $parent.find('.dropdown-menu' + desc)
//如果沒有，則不做處理
if (!$items.length) return
//找出當前處理焦點狀態(tài)的第一個下拉菜單項的索引
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
//給所選擇的菜單項設(shè)置焦點
$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è)置為bs.dropdown值
if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
//如果option傳遞了string，則表示要執(zhí)行某個方法
if (typeof option == 'string') data[option].call($this)
})
}
var old = $.fn.dropdown
//保留其他庫的$.fn.modal代碼(如果定義的話)，以便在noConflict之后可以繼續(xù)使用該老代碼
$.fn.dropdown = Plugin
//重設(shè)插件構(gòu)造器，可以通過該屬性獲取插件的真實類函數(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中下拉菜單的實現(xiàn)方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼