4.六、Bootstrap V4自學之路------組件---下拉列表

示例

把彈出菜單的觸發器以及彈出菜單包裹在一個.dropdown中，或者其它聲明瞭position:relative;的元素中。而後，添加菜單的HTML。

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <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>

PS：新知識點的話，則是 .open類。加上以後是打開狀態。

按鈕元素

你能夠視狀況在你的彈出菜單中使用<button>元素，而不是<a>元素。

<div class="dropdown open">
  <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>

PS：這裏要注意的是在菜單列表中，<button>標籤替代了<a>。

    若是說二者有什麼差異的話。我想到了以前看文檔上所說的，form表單。

    form控件，沒法管理到<a>標籤。參考form 表單文檔。

對齊

默認狀況下，一個彈出菜單的菜單是自動放置在父元素下面，與父元素左側對齊。給.dropdown-menu添加.dropdown-menu-right類能使菜單向右側對齊。

<div class="dropdown open">
  <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 dropdown-menu-right" 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>

PS：當使用 .dropdown-menu-right類。須要設置父類框的寬度。

菜單頭部

在任何一個彈出菜單添加一個頭部以標記活動的分區。

<div class="dropdown open">
  <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">
      <h6 class="dropdown-header">Dropdown header</h6>
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
    </div>
  </div>
</div>

PS：添加 .dropdown-header類。則標籤固定且不可編輯。

菜單分隔線

使用一個分隔線來對相關的菜單項分組。

<div class="dropdown open">
  <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">
      <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>

PS：看到以前的文檔裏，使用過這個屬性 .dropdown-divider類

禁用的菜單項

對彈出菜單中的某一項添加.disabled類，能夠把它們樣式化爲不可用。

<div class="dropdown open">
  <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">
      <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>
</div>

用法

依靠數據屬性或者JavaScript，經過切換菜單項的父元素上的.open類，彈出菜單插件能夠切換內容（彈出菜單）的可見性。

在移動設備上，打開一個彈出菜單會添加一個.dropdown-backdrop做爲輕觸區域，若是在菜單外面輕觸時彈，菜單會關閉。這是支持iOS設備的要求。這意味着在移動設備上，從一個打開的彈出菜單切換到另外一個彈出菜單至少須要兩次輕觸。

注意：data-toggle="dropdown"屬性是關閉彈出菜單的菜單在應用程序級別的依靠。因此最好一直使用它。

利用數據屬性

給一個連接或者按鈕添加一個data-toggle="dropdown"以切換一個彈出菜單。

不截圖了。關鍵是指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>

爲了保持URL與連接按鈕交互，請使用data-target屬性而不是href="#"。

<div class="dropdown">
  <a id="dLabel1" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </a>

  <div class="dropdown-menu" aria-labelledby="dLabel1">
      <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>
</div>

這樣的樣式有些難看。。。。（吐槽~_~!）

利用JavaScript

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

選項

無？

方法

$().dropdown('toggle')      對給定的導航條或輕觸導航觸發彈出菜單的菜單

PS：這裏我嘗試了，可是效果是觸發點擊效果，但不彈出菜單。

事件

全部的彈出菜單事件都是在.dropdown-menu的父元素上觸發的，這個父元素都有一個relatedTarget屬性，它的值是觸發的錨元素。

事件	描述
show.bs.dropdown	當調用顯示實例的方法時，會當即觸發該事件。
shown.bs.dropdown	當彈出菜單已經對用戶可見時（須要等待CSS 過渡完成），會觸發該事件。
hide.bs.dropdown	當調用隱藏實例的方法時，會當即觸發該事件。
hidden.bs.dropdown	當彈出菜單已經對用戶不可見時（須要等待CSS 過渡完成），會觸發該事件。

$('#myDropdown').on('show.bs.dropdown', function () {
   // do something… 
})