Bootstrap中下拉菜單的實現方法
這篇文章將為大家詳細講解有關Bootstrap中下拉菜單的實現方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
創新互聯從2013年創立，是專業互聯網技術服務公司，擁有項目網站建設、成都網站制作網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元柯橋做網站,已為上家服務,為柯橋各地企業和個人服務,聯系電話:18982081108
網頁交互的時候經常會需要上下文菜單或者隱藏/顯示菜單項，Bootstrap默認提供了用于顯示鏈接列表的可切換、有上下文的菜單。而且在各種交互狀態下的菜單展示需要和javascript插件配合才能使用。
使用方法
在使用Bootstrap框架的下拉菜單時，必須調用Bootstrap框架提供的bootstrap.js文件。當然，如果使用的是未編譯版本，在js文件夾下能找到一個名為“dropdown.js”的文件，也可以調用這個js文件
因為Bootstrap的組件交互效果都是依賴于jQuery庫寫的插件，所以在使用bootstrap.js之前一定要先加載jquery.js才會產生效果
<!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框架中的下拉菜單組件時，其結構運用的正確與否非常的重要，如果結構和類名未使用正確，直接影響組件是否能正常運用
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、當用戶再次點擊時，“p.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)關于“Bootstrap中下拉菜單的實現方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
新聞標題：Bootstrap中下拉菜單的實現方法
標題URL：http://m.kartarina.com/article0/jchdoo.html
成都網站建設公司_創新互聯，為您提供ChatGPT、營銷型網站建設、商城網站、網頁設計公司、企業建站、虛擬主機
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
- 「用戶體驗設計」時間戳的使用 2022-06-04
- 拉薩網站設計幫你加深seo優化用戶體驗 2020-11-22
- 成都網站制作關于用戶體驗的三個反思 2016-09-02
- 網站用戶體驗日益重視內鏈建設將會變得更加重要 2021-04-28
- 改善網站用戶體驗的方法 2021-12-15
- 網站制作可以從哪方面提升用戶體驗？ 2021-08-20
- SEO優化和用戶體驗有什么關系呢？ 2021-04-12
- 網站優化注重用戶體驗 2016-08-23
- 你知道，怎樣建站才能兼顧用戶體驗嗎？ 2016-10-19
- 成都網站建設公司如何建立具有良好用戶體驗的網站 2014-10-12
- 百度搜索：內容質量、網站速度、用戶體驗 2014-03-15
- 什么是用戶體驗？網站體驗對SEO優化的重要性！ 2023-04-13