Bootstrap 下拉菜單（Dropdown）插件

Bootstrap下拉菜單這一章講解了下拉菜單，但是沒有涉及到交互部分，本章將具體講解下拉菜單的交互。 使用下拉菜單（Dropdown）插件，您可以向任何組件（比如導航欄、標籤頁、膠囊式導航菜單、按鈕等）添加下拉菜單。

如果您想要單獨引用該插件的功能，那麼您需要引用dropdown.js 。 或者，正如Bootstrap插件概覽一章中所提到，您可以引用bootstrap.js或壓縮版的bootstrap.min.js 。

用法

您可以切換下拉菜單（Dropdown）插件的隱藏內容：

• 通過data屬性 ：向鏈接或按鈕添加data-toggle="dropdown"來切換下拉菜單，如下所示：

  <div class="dropdown">
    <a data-toggle="dropdown" href="#">下拉菜單（Dropdown）觸發器</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      ...
    </ul>
  </div>
  

  如果您需要保持鏈接完整（在瀏覽器不啟用JavaScript時有用），請使用data-target屬性代替href="#" ：

  <div class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
      下拉菜單（Dropdown） <span class="caret"></span>
    </a>
  
  
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      ...
    </ul>
  </div>
  

• 通過JavaScript ：通過JavaScript調用下拉菜單切換，請使用下面的方法：

  $('.dropdown-toggle').dropdown()
  

實例

在導航欄內

下面的實例演示了在導航欄內的下拉菜單的用法：

結果如下所示：

在標籤頁內

下面的實例演示了在標籤頁內的下拉菜單的用法：

結果如下所示：

選項

沒有選項。

方法

下拉菜單切換有一個簡單的方法用來顯示或隱藏下拉菜單。

$().dropdown('toggle')

實例

下面的實例演示了下拉菜單（Dropdown）插件方法的用法：

結果如下所示：