使用Bootstrap下拉插件用于顯示切換你要展示的鏈接列表和更多內容的，或觸發其它內容顯示(覆蓋）。

將下拉列表的切換（按鈕或鏈接）和下拉菜單包含在.dropdown中，或者另外聲明position: relative;元素;可以從<a>或<button>觸發下拉菜單，以適應你的使用的需求。

單一按鈕的下拉菜單

任何一個.btn塊都可以定義變更為下拉菜單，下面是兩個使用<button>元素做下拉菜單的示例。

<!-- 單一按鈕的下拉菜單 --> <div class="col-2"><div class="dropdown"><button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">button標簽下拉</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">廣州</a></div></div> </div><!-- 使用a標簽 --> <div class="col-2"><div class="dropdown"><a href="javascript:;" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">a標簽下拉</a><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">廣州</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">深圳</a></div></div> </div>

分離式按鈕下拉菜單

同樣，可用與單個按鈕下拉菜單近似的標記創建分裂式下拉菜單，注意添加了.dropdown-toggle-split-插入此符號為下拉選項作適當的間隔（距）處理。

<!-- 分離式按鈕下拉菜單 --> <div class="col-3"><div class="btn-group dropdown"><button class="btn btn-success btn-lg">分離式按鈕下拉菜單</button><button class="btn btn-success btn-lg dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"></button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">廣州</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">深圳</a></div></div> </div>

下拉菜單尺寸

<div class="row mt-5"><!-- 下拉菜單尺寸 --><div class="col-3 d-flex"><div class="dropdown"><button class="btn btn-danger btn-lg dropdown-toggle" data-toggle="dropdown">大按鈕</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">廣州</a></div></div><div class="dropdown"><button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">正常按鈕</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">廣州</a></div></div><div class="dropdown"><button class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown">小按鈕</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">廣州</a></div></div></div> </div>

下拉菜單方向

<div class="row mt-5"><div class="col"><div class="dropup"><!-- 向上展開 --><button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向上展開</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">廣州</a></div></div></div><div class="col"><div class="dropright"><!-- 向右展開 --><button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向右展開</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">廣州</a></div></div></div><div class="col"><div class="dropdown"><!-- 向下展開 --><button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向下展開</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">廣州</a></div></div></div><div class="col"><div class="dropleft"><!-- 向左展開 --><button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向左展開</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">廣州</a></div></div></div> </div>

非交互式的下拉菜單

有效菜單：加上.active讓下拉列表中的項樣式為active。

不可用菜單：加上.disabled讓下拉列表中的項樣式為不可用。

<!-- 非交互式的下拉菜單 --> <div class="row mt-5"><div class="col"><div class="dropdown"><div class="dropdown-menu show"><span class="dropdown-item-text">非點擊的項</span><h4 class="dropdown-header">下拉菜單的標題</h4><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item active">上海</a> <!-- 當前的選項 --><a href="#" class="dropdown-item disabled">廣州</a> <!-- 禁用的選項 --><div class="dropdown-divider"></div><button class="dropdown-item">深圳</button></div></div></div> </div>

菜單偏移

使用data-offset或data-reference更改下拉菜單的位置。

<!-- 偏移屬性 --> <div class="row mt-5" style="margin-top: 260px!important;"><div class="col"><div class="dropdown"><button class="btn btn-info dropdown-toggle" data-toggle="dropdown" data-offset="10,20">偏移</button><div class="dropdown-menu"><!-- 右對齊 --><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">廣州</a><div class="dropdown-divider"></div><button class="dropdown-item">深圳</button></div></div></div><div class="col"><div class="dropdown"><button class="btn btn-info dropdown-toggle" data-toggle="dropdown">偏移</button><div class="dropdown-menu" data-reference="parent"><!-- 右對齊 --><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">廣州</a><div class="dropdown-divider"></div><button class="dropdown-item">深圳</button></div></div></div> </div>

js的方法與事件 $('.dropdown-toggle').dropdown()

事件：

事件類型描述

show.bs.dropdown	當調用show顯示方法時，此事件會立即觸發。
shown.bs.dropdown	當下拉菜單對用戶可見時，會觸發此事件（將等待CSS轉換完成）??。
hide.bs.dropdown	當調用隱藏實例方法時，會立即觸發此事件。
hidden.bs.dropdown	當下拉菜單從用戶隱藏完畢時，會觸發此事件（將等待CSS轉換完成）??。

<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><title>Bootstrap下拉菜單樣式</title> </head><body><div class="container"><!-- js的方法與事件 --><div class="row mt-5"><div class="col"><div class="dropdown"><button class="btn btn-danger dropdown-toggle" id="myBtn">方法</button><div class="dropdown-menu" id="myDropdown" data-reference="parent"><!-- 右對齊 --><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">廣州</a><div class="dropdown-divider"></div><button class="dropdown-item">深圳</button></div></div></div><div class="col"><div class="dropdown" id="myDropdown1"> <!-- 注意，事件要放在這里！！！ --><button class="btn btn-info dropdown-toggle" data-toggle="dropdown">事件</button><div class="dropdown-menu" data-reference="parent"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">廣州</a><div class="dropdown-divider"></div><button class="dropdown-item">深圳</button></div></div></div></div></div><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous"></script><script>//方法$('#myBtn').click(function () {//$('#myDropdown').dropdown('show');//$('#myDropdown').dropdown('hide');//$('#myDropdown').dropdown('toggle');//解決toggle的問題$('#myDropdown').toggle(function () {$('#myDropdown').dropdown('show');}, function () {$('#myDropdown').dropdown('hide');});});//事件$('#myDropdown1').on('show.bs.dropdown', function () {console.log('調用了show方法');});$('#myDropdown1').on('shown.bs.dropdown', function () {console.log('下拉列表完全顯示了');});$('#myDropdown1').on('hide.bs.dropdown', function () {console.log('調用了hide方法');});$('#myDropdown1').on('hidden.bs.dropdown', function () {console.log('下拉列表完全隱藏了');});</script> </body></html>

總結

以上是生活随笔為你收集整理的jsp 下拉列表选取触发function_Bootstrap下拉菜单样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。