?
This document uses PHP Chinese website manual Release
切換上下文覆蓋，以顯示鏈接列表和更多與引導(dǎo)下拉插件。
概述
下拉菜單是可切換的，用于顯示鏈接列表等的上下文覆蓋。它們與包含的Bootstrap下拉式JavaScript插件交互。他們通過點擊而不是通過盤旋來切換; 這是一個有意的設(shè)計決定。
下拉菜單建立在第三方庫Popper.js上，該庫提供動態(tài)定位和視口檢測。一定要包括popper.min.js引導(dǎo)的JavaScript或使用前bootstrap.bundle.min.js/ bootstrap.bundle.js包含Popper.js。
如果你從源代碼構(gòu)建我們的JS，它需要util.js。
可達性
所述WAI ARIA標(biāo)準(zhǔn)定義了實際role="menu"插件，但是這是特定于該觸發(fā)動作或功能應(yīng)用類菜單。ARIA菜單只能包含菜單項，復(fù)選框菜單項，單選按鈕菜單項，單選按鈕組和子菜單。
另一方面，Bootstrap的下拉菜單設(shè)計為通用的，適用于各種情況和標(biāo)記結(jié)構(gòu)。例如，可以創(chuàng)建包含其他輸入和表單控件的下拉列表，例如搜索字段或登錄表單。出于這個原因，引導(dǎo)不指望（也沒有自動添加）任何role與aria-真正ARIA的菜單需要的屬性。作者必須自己包含這些更具體的屬性。
但是，Bootstrap確實為大多數(shù)標(biāo)準(zhǔn)鍵盤菜單交互添加了內(nèi)置支持，例如.dropdown-item使用光標(biāo)鍵移動單個元素的能力以及使用ESC鍵關(guān)閉菜單的能力。
實例
將下拉的切換（您的按鈕或鏈接）和下拉菜單.dropdown或其他聲明的元素封裝在一起position: relative;?？梢酝ㄟ^下拉菜單<a>或<button>元素來更好地滿足潛在需求。
單按鈕下拉
任何單個.btn可以變成下拉切換與一些標(biāo)記更改。以下是您可以如何將它們與任何<button>元素配合使用的方法：
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div></div>
與<a>要素：
<div class="dropdown show"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div></div>
最好的部分是你也可以用任何按鈕變種來做到這一點：
<!-- Example single danger button --><div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div></div>
拆分按鈕下拉
同樣，使用與單個按鈕下拉菜單幾乎相同的標(biāo)記創(chuàng)建分割按鈕下拉菜單，但.dropdown-toggle-split在下拉插入點周圍添加了適當(dāng)?shù)拈g距。
我們使用這個額外的類來減少padding插入符號任何一側(cè)的水平25％，并刪除margin-left那些用于常規(guī)按鈕下拉的添加。這些額外的變化使插入符號集中在分割按鈕中，并在主按鈕旁提供更適當(dāng)大小的命中區(qū)域。
<!-- Example split danger button --><div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div></div>
Sizing
按鈕下拉菜單可以處理各種尺寸的按鈕，包括默認(rèn)和分割下拉按鈕。
<!-- Large button groups (default and split) --><div class="btn-group"> <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Large button </button> <div class="dropdown-menu"> ... </div></div><div class="btn-group"> <button class="btn btn-secondary btn-lg" type="button"> Large button </button> <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> ... </div></div><!-- Small button groups (default and split) --><div class="btn-group"> <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Small button </button> <div class="dropdown-menu"> ... </div></div><div class="btn-group"> <button class="btn btn-secondary btn-sm" type="button"> Small button </button> <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> ... </div></div>
丟棄變化
通過添加.dropup到父元素。
<!-- Default dropup button --><div class="btn-group dropup"> <button type="button" class="btn btn-secondary">Dropup</button> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <!-- Dropdown menu links --> </div></div><!-- Split dropup button --><div class="btn-group dropup"> <button type="button" class="btn btn-secondary"> Split dropup </button> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <!-- Dropdown menu links --> </div></div>
菜單項
歷史上的下拉菜單內(nèi)容必須是鏈接，但v4不再是這種情況?，F(xiàn)在，您可以選擇<button>在下拉列表中使用元素，而不僅僅是<a>s。
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="dropdownMenu2"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Something else here</button> </div></div>
菜單對齊
默認(rèn)情況下，下拉菜單自動從父級的頂部和左側(cè)定位100％。添加.dropdown-menu-right到.dropdown-menu右側(cè)對齊下拉菜單。
抬頭！Dropper的位置得益于Popper.js（除非它們包含在導(dǎo)航欄中）。
<div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> This dropdown's menu is right-aligned </button> <div class="dropdown-menu dropdown-menu-right"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Something else here</button> </div></div>
菜單標(biāo)題
在任何下拉菜單中添加標(biāo)題以標(biāo)記操作的各個部分。
<div class="dropdown-menu"> <h6 class="dropdown-header">Dropdown header</h6> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a></div>
菜單分隔器
用分隔器分隔相關(guān)菜單項組。
<div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a></div>
菜單表格
將表單放置在下拉菜單中，或?qū)⑵浞湃胂吕藛沃?，并使用邊距或填充實用程序為其提供所需的?fù)空間。
<div class="dropdown-menu"> <form class="px-4 py-3"> <div class="form-group"> <label for="exampleDropdownFormEmail1">Email address</label> <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com"> </div> <div class="form-group"> <label for="exampleDropdownFormPassword1">Password</label> <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password"> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">New around here? Sign up</a> <a class="dropdown-item" href="#">Forgot password?</a></div>
<form class="dropdown-menu p-4"> <div class="form-group"> <label for="exampleDropdownFormEmail2">Email address</label> <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com"> </div> <div class="form-group"> <label for="exampleDropdownFormPassword2">Password</label> <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password"> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Sign in</button></form>
禁用菜單項
添加.disabled到下拉菜單中的項目將其設(shè)置為禁用。
<div class="dropdown-menu"> <a class="dropdown-item" href="#">Regular link</a> <a class="dropdown-item disabled" href="#">Disabled link</a> <a class="dropdown-item" href="#">Another link</a></div>
用法
通過數(shù)據(jù)屬性或JavaScript，下拉插件通過切換.show父列表項上的類來切換隱藏內(nèi)容（下拉菜單）。該data-toggle="dropdown"屬性依賴于在應(yīng)用程序級別關(guān)閉下拉菜單，所以始終使用它是個好主意。
通過數(shù)據(jù)屬性
添加data-toggle="dropdown"到鏈接或按鈕來切換下拉菜單。
<div class="dropdown"> <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown trigger </button> <div class="dropdown-menu" aria-labelledby="dLabel"> ... </div></div>
通過JavaScript
通過JavaScript調(diào)用下拉菜單：
$('.dropdown-toggle').dropdown()data-toggle="dropdown"仍需
無論您是通過JavaScript調(diào)用下拉列表還是使用data-api，data-toggle="dropdown"總是需要在下拉的觸發(fā)器元素中出現(xiàn)。
備選方案
選項可以通過數(shù)據(jù)屬性或JavaScript傳遞。對于數(shù)據(jù)屬性，請將選項名稱附加到data-，如data-offset=""。
名稱 | 類型 | 默認(rèn) | 描述 |
|---|---|---|---|
offset | number | string | function | 0 | 下拉相對于其目標(biāo)的偏移量。有關(guān)更多信息，請參閱Popper.js的偏移文檔。 |
flip | boolean | true | 允許下拉菜單在參考元素重疊的情況下翻轉(zhuǎn)。有關(guān)更多信息，請參閱Popper.js的翻轉(zhuǎn)文檔。 |
方法
方法 | 描述 |
|---|---|
$().dropdown('toggle') | 切換給定導(dǎo)航欄或標(biāo)簽導(dǎo)航的下拉菜單。 |
$().dropdown('update') | 更新元素下拉列表的位置。 |
$().dropdown('dispose') | 銷毀元素的下拉菜單。 |
事件
所有下拉事件都在.dropdown-menu父元素上觸發(fā)，并有一個relatedTarget屬性，其值是切換錨點元素。
事件 | 描述 |
|---|---|
show.bs.dropdown | 當(dāng)show instance方法被調(diào)用時，此事件立即觸發(fā)。 |
shown.bs.dropdown | 當(dāng)下拉菜單對用戶可見時會觸發(fā)此事件（等待CSS轉(zhuǎn)換完成）。 |
hide.bs.dropdown | 當(dāng)調(diào)用隱藏實例方法時立即觸發(fā)此事件。 |
hidden.bs.dropdown | 當(dāng)下拉菜單完成對用戶隱藏時會觸發(fā)此事件（等待CSS轉(zhuǎn)換完成）。 |
$('#myDropdown').on('show.bs.dropdown', function () { // do something…})