快捷導(dǎo)航

bootstrap下拉菜單使用方法解析

更新時間：2017年01月13日 11:28:35 投稿：lijiao

這篇文章主要為大家詳細解析了bootstrap下拉菜單使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Bootstrap框架中的下拉菜單組件是一個獨立的組件，具體來學(xué)習(xí)一下

下拉菜單（Dropdown）

☑ LESS版本：對應(yīng)的源文件dropdowns.less

<h3>示例1</h3>
<div class="navbar navbar-default" id="navmenu">
  <a href="##" class="navbar-brand">W3cplus</a>
  <ul class="nav navbar-nav">
    <li class="dropdown">
      <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
        <li role="presentation"><a href="##">CSS3</a></li>
        <li role="presentation"><a href="##">HTML5</a></li>
        <li role="presentation"><a href="##">Sass</a></li>
      </ul>
    </li>
    <li><a href="##">前端論壇</a></li>
    <li><a href="##">關(guān)于我們</a></li>
  </ul>
</div>

<h3>示例2</h3>
<ul class="nav nav-pills">
  <li class="dropdown">
    <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
      <li role="presentation"><a href="##">CSS3</a></li>
      <li role="presentation"><a href="##">HTML5</a></li>
      <li role="presentation"><a href="##">Sass</a></li>
    </ul>
  </li>
  <li class="active"><a href="##">前端論壇</a></li>
  <li><a href="##">關(guān)于我們</a></li>
</ul>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.js"></script>

下拉菜單–屬性聲明式方法（一）

☑ 被點擊的菜單項鏈接或按鈕需要添加自定義屬性 data-toggle=”dropdown”
實現(xiàn)下拉菜單原理：

Dropdown插件加載時，對所有帶有“data-toggle=dropdown”樣式的元素綁定了事件，用戶單擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時，會觸發(fā)JavaScript事件代碼。當(dāng)用戶點擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時，下拉菜單的父容器（上面的示例是 “<li class="dropdown">”）會添加一個open類名，此時下拉菜單顯示；再次單擊時，JavaScript會刪除剛添加的open類名，此時下拉菜單將隱藏。

下接菜單結(jié)構(gòu):

<div class="dropdown">
  <a data-toggle="dropdown" href="#">下拉菜單觸發(fā)器</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul>
</div>

如果觸發(fā)下拉菜單的元素是一個鏈接元素，為了避免點擊鏈接，頁面跳到頂部，可以使用data-target="#"來替代href="#"

<div class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> Dropdown <span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul>
</div>


<ul class="nav nav-pills">
  <li><a href="##">教程</a></li>
  <li class="active"><a href="##">前端論壇</a></li>
  <li class="dropdown">
    <a href="##" data-toggle="dropdown" class="dropdown-toggle">關(guān)于我們</a>   

     <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
        <li role="presentation"><a href="##">CSS3</a></li>
        <li role="presentation"><a href="##">HTML5</a></li>
        <li role="presentation"><a href="##">Sass</a></li>
     </ul>
  </li>
</ul>

下拉菜單–JavaScript觸發(fā)方法

<ul class="nav nav-pills">
  <li class="dropdown">
    <a href="##" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
      <li role="presentation"><a href="##">CSS3</a></li>
      <li role="presentation"><a href="##">HTML5</a></li>
      <li role="presentation"><a href="##">Sass</a></li>
    </ul>
  </li>
  <li class="active"><a href="##">前端論壇</a></li>
  <li><a href="##">關(guān)于我們</a></li>
</ul>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script>
  $(function(){
  $(".dropdown-toggle").dropdown();
})  
</script>

//顯示下拉菜單：
$(function(){
  $(".dropdown-toggle").dropdown("toggle");
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: