前言
閱讀之前您也可以到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 () { // 在顯示的時候做一些處理代碼 })
總結
?看似很簡單的東西,有時候實踐起來還是有難度的,多實踐肯定不會錯。
本文已更新至Bootstrap3.0入門學習系列導航 http://www.cnblogs.com/aehyok/p/3404867.html
有點累了,睡覺去也。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

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