基于jquery實現(xiàn)三級下拉菜單

更新時間：2016年05月10日 11:02:27 作者：Sabrina_TSM

這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)三級下拉菜單的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery三級下拉菜單的具體實現(xiàn)代碼，供大家參考，具體內容如下

在寫這個的時候，首先要捋順思路。點一個菜單的時候，其他的要閉合，點一級菜單的時候，二三級菜單要閉合，等等。
大致代碼如下：

<body>
 <aside>
  <ul class="one">
   <li> <a href="#" class="a">目錄A</a>
    <ul class="two" style="display: none">
     <li><a href="#" class="a">二級目錄A</a>
      <ul class="three" style="display: none">
       <li><a href="#">三級目錄A</a></li>
      </ul>
     </li>
     <li><a href="#" class="a">二級目錄B</a></li>
     <li><a href="#" class="a">二級目錄C</a></li>
    </ul>
   </li>
   <li> <a href="#" class="a">目錄B</a>
    <ul class="two" style="display: none">
     <li><a href="#" class="a">二級目錄A</a>
      <ul class="three" style="display: none">
       <li><a href="#">三級目錄A</a></li>
      </ul>
     </li>
     <li><a href="#" class="a">二級目錄B</a></li>
     <li><a href="#" class="a">二級目錄C</a></li>
    </ul>
   </li>
   <li> <a href="#" class="a">目錄C</a> </li>
  </ul>
 </aside>

//jQuery部分
<script src="js/jquery-1.8.3.min.js"></script>
<script>
  $(document).ready(function() {
   $('.a').click(function() {
    if ($(this).siblings('ul').css('display') == 'none') {
     $(this).siblings('ul').slideDown(100).children('li');
     if ($(this).parents('li').siblings('li').children('ul').css('display') == 'block') {
      $(this).parents('li').siblings('li').children('ul').slideUp(100);

     }
    } else {
     //控制自身菜單下子菜單隱藏
     $(this).siblings('ul').slideUp(100);
     //控制自身菜單下子菜單隱藏
     $(this).siblings('ul').children('li').children('ul').slideUp(100);
    }
   });
 });
</script>
</body>

如果要添加樣式的話，一定要注意，否則菜單可能會出現(xiàn)錯誤。
完整代碼地址：https://github.com/SabrinaTian/ThreeMenuNav.git
git里還有一個帶有圖標的案例，不點擊的話是+號，菜單打開后，變?yōu)?號。
以上就是本文的全部內容，希望對大家的學習有所幫助。

您可能感興趣的文章:

強烈推薦240多個jQuery插件提供下載
jQuery 是繼 prototype 之后又一個優(yōu)秀的 Javascript 框架。其宗旨是—寫更少的代碼,做更多的事情。它是輕量級的 js 庫(壓縮后只有21k) ，這是其它的 js 庫所不及的，它兼容 CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
2008-06-06
jQuery實現(xiàn)感應鼠標動畫效果自動伸長的輸入框實例
這篇文章主要介紹了jQuery實現(xiàn)感應鼠標動畫效果自動伸長的輸入框,實例分析了jQuery鼠標事件及animate動畫效果的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
基于jQuery的select下拉框選擇觸發(fā)事件實例分析
這篇文章主要介紹了基于jQuery的select下拉框選擇觸發(fā)事件實現(xiàn)方法,結合實例形式分析了常用瀏覽器對select觸發(fā)事件的兼容及實現(xiàn)觸發(fā)的相關技巧,需要的朋友可以參考下
2016-11-11
jQuery實現(xiàn)判斷滾動條到底部
這篇文章主要介紹了jQuery實現(xiàn)判斷滾動條到底部的相關資料,需要的朋友可以參考下
2015-06-06
jquery實現(xiàn)Li滾動時滾動條自動添加樣式的方法
這篇文章主要介紹了jquery實現(xiàn)Li滾動時滾動條自動添加樣式的方法,實例分析了jquery響應鼠標事件及動態(tài)添加樣式的相關技巧,需要的朋友可以參考下
2015-08-08
BootStrap中按鈕點擊后被禁用按鈕的最佳實現(xiàn)方法
在項目開發(fā)中經(jīng)常會遇到這樣的功能，為了防止在Bootstrap中點擊按鈕多次提交，所以希望點擊按鈕后禁用按鈕。怎么實現(xiàn)此功能呢？今天腳本之家小編給大家分享BootStrap中按鈕點擊后被禁用按鈕的最佳實現(xiàn)方法，非常不錯，感興趣的朋友參考下吧
2016-09-09
jQuery實現(xiàn)的自定義輪播圖功能詳解
這篇文章主要介紹了jQuery實現(xiàn)的自定義輪播圖功能,結合實例形式詳細分析了輪播圖的原理、實現(xiàn)步驟及相關操作技巧,需要的朋友可以參考下
2018-12-12
jQuery實現(xiàn)的鼠標滾輪控制圖片縮放功能實例
這篇文章主要介紹了jQuery實現(xiàn)的鼠標滾輪控制圖片縮放功能,結合完整實例形式分析了jQuery基于鼠標滾輪mousewheel事件進行頁面元素屬性動態(tài)操作的相關實現(xiàn)技巧,需要的朋友可以參考下
2017-10-10
jQuery中:selected選擇器用法實例
這篇文章主要介紹了jQuery中:selected選擇器用法,實例分析了:selected選擇器的功能、定義及匹配被選擇的<option>元素的使用技巧,需要的朋友可以參考下
2015-01-01
jQuery插件slicebox實現(xiàn)3D動畫圖片輪播切換特效
Slicebox是一款效果非常華麗的jquery和css3 3d幻燈片插件。Slicebox幻燈片插件能夠將圖片切片，然后做3d旋轉。Slicebox幻燈片插件共有4種效果，視覺沖擊感非常強。
2015-04-04