Bootstrap實作下拉選單效果_javascript技巧

下拉式選單用於顯示連結清單的可切換、有上下文的選單。

1、案例

將下拉式選單觸發器和下拉式選單都包裹在.dropdown裡，然後加入組成選單的HTML程式碼。

 <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

可以透過上面的程式碼發現，裡面可能有很多陌生的樣式類別或屬性。

一個Dropdown按鈕和右邊有個小圖示caret，當然這個小圖示和按鈕的文字是平級的。

首先看button按鈕中有個dropdown-toggle，還有一個data-toggle屬性，根據這個屬性來彈出列表。

緊接著ul標籤的dropdown-menu應該是和上面button按鈕的樣式類dropdown-toggle聯合使用，在透過aria-labelledby綁定上面的button按鈕。

下來第四個li標籤中有個divider其實是一個分割線的樣式類別。

大概我理解的就這個樣子，理解的肯定不到位。

2、對齊選項

給下拉式選單.dropdown-menu加上.text-right 讓文字右對齊。

 <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

只是在上面的程式碼中的ul標籤上新增了一個text-right的樣式類別。

3、標題

在任何下拉式選單中均可透過新增標題來標明一組動作。

 <h1>下拉菜单</h1>
  <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

主要是增加了

Dropdown header

   裡面有個.dropdown-header的樣式類別。

4、停用的選單項目

給下拉式選單中的

加上.disabled禁用連結。

繼續修改上面的程式碼將Something else here行的程式碼進行替換

複製程式碼 程式碼如下:

Something else here

主要是在li標籤中加入.disabled的樣式類別。

你運行之後可以查看效果，其實效果和上面的標題樣式差不多，當你點擊的時候會有一個禁用的圖標顯示。

5、基本案例

1）、按鈕式下拉式選單
把任何按鈕放入.btn-group然後加入正確的選單標記，就可以做成下拉式選單觸發器。

單按鈕下拉式選單

只要改變一些基本的標記，就能把按鈕變成下拉式選單開關。

<div class="btn-group">
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 Action <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li class="divider"></li>
 <li><a href="#">Separated link</a></li>
 </ul>
</div>

分裂式按鈕下拉式選單

相似地，分裂式按鈕下拉式選單也需要同樣的改變標記，但只要多一個分開的按鈕。

<div class="btn-group">
   <button type="button" class="btn btn-danger">Action</button>
   <div class="dropdown">
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
    </ul>
   </div>
  </div

只能點選小圖示才能出現下來選單額。

2）、尺寸

下拉式選單按鈕適用所有尺寸的按鈕。

<div class="btn-group">
 <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
 Large button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
 <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
 Small button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
 <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
 Extra small button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

透過樣式類別.btn-lg、 .btn-sm、.btn-xs來控制按鈕的大小。

3）、向上彈出式選單

為父元素添加.dropup就能使觸發的下拉式選單在元素上方。

<div class="btn-group dropup">
 <button type="button" class="btn btn-default">Dropup</button>
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 <span class="caret"></span>
 <span class="sr-only">Toggle Dropdown</span>
 </button>
 <ul class="dropdown-menu">
 <!-- Dropdown menu links -->
 </ul>
</div>

更多內容請參考：Bootstrap學習教學

總結：

 本文主要介紹了下拉式選單的相關內容，然後介紹了按鈕和下拉式選單的組合，變化還是蠻多的，樣式也不錯，希望大家喜歡。