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 id="下拉菜单">下拉菜单</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