Bootstrap3.0學習第十八輪(JavaScript插件——下拉菜單)

閱讀之前您也可以到Bootstrap3.0入門學習系列導航中進行查看http://www.cnblogs.com/aehyok/p/3404867.html

本文主要來學習一下JavaScript插件--下拉菜單。

下拉菜單

 通過此插件可以爲幾乎所有東西添加下拉菜單，包括導航條、標籤頁、膠囊式按鈕，本文主要來介紹下導航條裏面的下拉菜單吧，其實道理都是一樣的。

用於導航條

先來看一下之前做過的一個簡單的導航條

導航條分爲四個部分。第一部分導航頭，第二部分導航列，第三部分form查詢表單，第四部分導航列。

 <nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myCollapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <div class="collapse navbar-collapse" id="myCollapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-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>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-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>
      </li>
    </ul>
  </div>
</nav>

用法一--通過data屬性

通過向鏈接或按鈕添加data-toggle="dropdown"可以打開或關閉下拉菜單。

      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-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>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>

 即上面的那個小例子就是如此。

用法二--通過JavaScript

通過JavaScript打開或關閉下拉菜單：

 

通過將data-toggle屬性值設置爲空，或者直接刪除data-toggle屬性，那麼再次點擊就不會出現下來菜單了，接下來我們通過給這個a標籤添加一個onclick事件。

<a href="#" class="dropdown-toggle" id="myDropDown" data-toggle="" onClick="Test()">Dropdown <b class="caret"></b></a>

並添加相應的JavaScript的函數代碼

 <script type="text/javascript"> function Test()
    {
        $('#myDropDown').dropdown();
        } </script>

就這樣保存，然後F5刷新頁面重新點擊，就可以看到下拉菜單了（不過這裏不太清楚爲什麼要點擊兩次下拉菜單才會出來）。

事件

可以綁定事件，然後在元素進行相應處理的時候會自動綁定到元素，並進行執行相關的代碼。

$('#myDropdown').on('show.bs.dropdown', function () { // 在顯示的時候做一些處理代碼 })

總結

 看似很簡單的東西，有時候實踐起來還是有難度的，多實踐肯定不會錯。