基于jquery實(shí)現(xiàn)三級(jí)下拉菜單
更新時(shí)間：2016年05月10日 11:02:27 作者：Sabrina_TSM
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)三級(jí)下拉菜單的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jquery三級(jí)下拉菜單的具體實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下
在寫這個(gè)的時(shí)候，首先要捋順?biāo)悸?。點(diǎn)一個(gè)菜單的時(shí)候，其他的要閉合，點(diǎn)一級(jí)菜單的時(shí)候，二三級(jí)菜單要閉合，等等。
大致代碼如下：
<body>
<aside>
<ul class="one">
<li> <a href="#" class="a">目錄A</a>
<ul class="two" style="display: none">
<li><a href="#" class="a">二級(jí)目錄A</a>
<ul class="three" style="display: none">
<li><a href="#">三級(jí)目錄A</a></li>
</ul>
</li>
<li><a href="#" class="a">二級(jí)目錄B</a></li>
<li><a href="#" class="a">二級(jí)目錄C</a></li>
</ul>
</li>
<li> <a href="#" class="a">目錄B</a>
<ul class="two" style="display: none">
<li><a href="#" class="a">二級(jí)目錄A</a>
<ul class="three" style="display: none">
<li><a href="#">三級(jí)目錄A</a></li>
</ul>
</li>
<li><a href="#" class="a">二級(jí)目錄B</a></li>
<li><a href="#" class="a">二級(jí)目錄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>
如果要添加樣式的話，一定要注意，否則菜單可能會(huì)出現(xiàn)錯(cuò)誤。
完整代碼地址：https://github.com/SabrinaTian/ThreeMenuNav.git
git里還有一個(gè)帶有圖標(biāo)的案例，不點(diǎn)擊的話是+號(hào)，菜單打開后，變?yōu)?號(hào)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
- jQuery下拉菜單的實(shí)現(xiàn)代碼
- 精心挑選的15個(gè)jQuery下拉菜單制作教程
- bootstrap+jQuery 實(shí)現(xiàn)下拉菜單中復(fù)選框全選和全不選效果
- jQuery實(shí)現(xiàn)的checkbox級(jí)聯(lián)選擇下拉菜單效果示例
- jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果示例
- jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果
- jQuery插件cxSelect多級(jí)聯(lián)動(dòng)下拉菜單實(shí)例解析
- jQuery模擬select實(shí)現(xiàn)下拉菜單功能
- jQuery實(shí)現(xiàn)的頁(yè)面詳情展開收起功能示例
- jquery實(shí)現(xiàn)先淡出再折疊收起的動(dòng)畫效果
- jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起
- jQuery實(shí)現(xiàn)下拉菜單動(dòng)態(tài)添加數(shù)據(jù)點(diǎn)擊滑出收起其他功能
相關(guān)文章
強(qiáng)烈推薦240多個(gè)jQuery插件提供下載
jQuery 是繼 prototype 之后又一個(gè)優(yōu)秀的 Javascript 框架。其宗旨是—寫更少的代碼,做更多的事情。它是輕量級(jí)的 js 庫(kù)(壓縮后只有21k) ，這是其它的 js 庫(kù)所不及 的，它兼容 CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。2008-06-06
基于jQuery的select下拉框選擇觸發(fā)事件實(shí)例分析
這篇文章主要介紹了基于jQuery的select下拉框選擇觸發(fā)事件實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了常用瀏覽器對(duì)select觸發(fā)事件的兼容及實(shí)現(xiàn)觸發(fā)的相關(guān)技巧,需要的朋友可以參考下
2016-11-11 
jQuery實(shí)現(xiàn)判斷滾動(dòng)條到底部
這篇文章主要介紹了jQuery實(shí)現(xiàn)判斷滾動(dòng)條到底部的相關(guān)資料,需要的朋友可以參考下
2015-06-06 
jquery實(shí)現(xiàn)Li滾動(dòng)時(shí)滾動(dòng)條自動(dòng)添加樣式的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)Li滾動(dòng)時(shí)滾動(dòng)條自動(dòng)添加樣式的方法,實(shí)例分析了jquery響應(yīng)鼠標(biāo)事件及動(dòng)態(tài)添加樣式的相關(guān)技巧,需要的朋友可以參考下
2015-08-08 
BootStrap中按鈕點(diǎn)擊后被禁用按鈕的最佳實(shí)現(xiàn)方法
在項(xiàng)目開發(fā)中經(jīng)常會(huì)遇到這樣的功能，為了防止在Bootstrap中點(diǎn)擊按鈕多次提交，所以希望點(diǎn)擊按鈕后禁用按鈕。怎么實(shí)現(xiàn)此功能呢？今天腳本之家小編給大家分享BootStrap中按鈕點(diǎn)擊后被禁用按鈕的最佳實(shí)現(xiàn)方法，非常不錯(cuò)，感興趣的朋友參考下吧
2016-09-09 
jQuery實(shí)現(xiàn)的自定義輪播圖功能詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)的自定義輪播圖功能,結(jié)合實(shí)例形式詳細(xì)分析了輪播圖的原理、實(shí)現(xiàn)步驟及相關(guān)操作技巧,需要的朋友可以參考下
2018-12-12 
jQuery實(shí)現(xiàn)的鼠標(biāo)滾輪控制圖片縮放功能實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的鼠標(biāo)滾輪控制圖片縮放功能,結(jié)合完整實(shí)例形式分析了jQuery基于鼠標(biāo)滾輪mousewheel事件進(jìn)行頁(yè)面元素屬性動(dòng)態(tài)操作的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-10-10 
這篇文章主要介紹了jQuery中:selected選擇器用法,實(shí)例分析了:selected選擇器的功能、定義及匹配被選擇的<option>元素的使用技巧,需要的朋友可以參考下
2015-01-01 
jQuery插件slicebox實(shí)現(xiàn)3D動(dòng)畫圖片輪播切換特效
Slicebox是一款效果非常華麗的jquery和css3 3d幻燈片插件。Slicebox幻燈片插件能夠?qū)D片切片，然后做3d旋轉(zhuǎn)。Slicebox幻燈片插件共有4種效果，視覺沖擊感非常強(qiáng)。
2015-04-04