亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

(JavaScript插件——下拉菜單)

系統 2217 0

前言

閱讀之前您也可以到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>
    

(JavaScript插件——下拉菜單)_第1張圖片

通過向鏈接或按鈕添加 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打開或關閉下拉菜單:

(JavaScript插件——下拉菜單)_第2張圖片

?

通過將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刷新頁面重新點擊,就可以看到下拉菜單了(不過這里不太清楚為什么要點擊兩次下拉菜單才會出來)。

(JavaScript插件——下拉菜單)_第3張圖片

事件

(JavaScript插件——下拉菜單)_第4張圖片

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

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

總結

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

本文已更新至Bootstrap3.0入門學習系列導航 http://www.cnblogs.com/aehyok/p/3404867.html

有點累了,睡覺去也。

?
?

(JavaScript插件——下拉菜單)


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 毛片欧美| 高h粗大强行撑开紧窄的嫩缝 | 日韩精品欧美国产精品亚 | 97精品视频共享总站 | 欧美狠狠 | 日本黄色绿像 | 国产亚洲精品一区999 | 国产系列 视频二区 | 午夜欧美精品久久久久久久久 | 四虎影院永久在线 | 香蕉久久夜色精品国产2020 | 日本aⅴ在线不卡免费观看 日本aaaa | 伊人色婷婷| 狠狠操.com| 日本一区高清 | 亚洲狠狠婷婷综合久久久久网站 | 久久精品久久久久久久久人 | 国产成+人+综合+欧美 亚洲 | 久操视频在线观看免费 | 天天操夜夜拍 | 天天夜碰日日摸日日澡 | 免费久久久久 | 青青青国产手机免费视频 | 日韩啊啊啊 | 四虎永久视频 | avtt亚洲一区中文字幕 | 久色精品| 香蕉视频成人在线观看 | 亚洲欧美一区二区三区综合 | 久久99精品久久久久久综合 | 欧美人成一本免费观看视频 | 成人久久久观看免费毛片 | 亚洲国产成人久久一区www | 九天玄帝诀王凡小说免费阅读 | 国产a久久精品一区二区三区 | 一区二区三区美女视频 | 欧美性一区二区三区 | 亚洲视频在线不卡 | 国产成人综合亚洲一区 | 国产成人亚洲精品91专区高清 | 亚洲 欧美 成人日韩 |