快捷導(dǎo)航

jquery 利用show和hidden實(shí)現(xiàn)級(jí)聯(lián)菜單示例代碼

更新時(shí)間：2013年08月09日 11:49:35 作者：

級(jí)聯(lián)菜單的實(shí)現(xiàn)方法有很多，在本文為大家介紹下使用show和hidden輕松實(shí)現(xiàn)下級(jí)聯(lián)效果，感興趣的朋友可以參考下，希望對(duì)大家有所幫助

 
<%@ page language="java" contentType="text/html; charset=UTF-8" 
pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>jqueryMenu</title> 
<script type="text/javascript" src="js/jquery-1.10.2.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var allMenu=$("ul > a");//找到所有主菜單 
allMenu.click(function(){ 
var list=$(this).nextAll('li');//找到當(dāng)前被點(diǎn)擊a節(jié)點(diǎn)的所有l(wèi)i兄弟節(jié)點(diǎn) 
list.toggle('show'); 
}); 
}); 
</script> 
</head> 
<body> 
<ul><a href="#">菜單一</a> 
<li><a href="#">子菜單一</a></li> 
<li><a href="#">子菜單二</a></li> 
</ul> 
<ul><a href="#">菜單二</a> 
<li><a href="#">子菜單一</a></li> 
<li><a href="#">子菜單二</a></li> 
</ul> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

再說(shuō)AutoComplete自動(dòng)補(bǔ)全之實(shí)現(xiàn)原理
再說(shuō)AutoComplete自動(dòng)補(bǔ)全之實(shí)現(xiàn)原理,這里以asp.net后臺(tái)為主，考慮到性能最好是生成xml并入緩存。
2011-11-11
Yii-自定義刪除確認(rèn)彈框(zyd)jquery實(shí)現(xiàn)代碼
Yii-自定義刪除確認(rèn)彈框(zyd),簡(jiǎn)單/時(shí)尚/大方適合比較愛(ài)酷的人使用，時(shí)尚的你可不要錯(cuò)過(guò)了哈，希望本文知識(shí)點(diǎn)可以幫助到你
2013-03-03
jQuery插件實(shí)現(xiàn)可輸入和自動(dòng)匹配的下拉框
這篇文章主要為大家詳細(xì)介紹了jQuery插件實(shí)現(xiàn)可輸入和自動(dòng)匹配的下拉框,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
jQuery實(shí)現(xiàn)html table行Tr的復(fù)制、刪除、計(jì)算功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)html table行Tr的復(fù)制、刪除、計(jì)算功能,涉及jQuery針對(duì)table表格的常見(jiàn)復(fù)制、添加、刪除與計(jì)算行數(shù)等簡(jiǎn)單操作技巧,需要的朋友可以參考下
2017-07-07
jquery拖動(dòng)插件(jquery.drag)使用介紹
可以使用鼠標(biāo)任意拖動(dòng)列表項(xiàng)改變默認(rèn)的位置，具體的實(shí)現(xiàn)如下(附演示)，感興趣的朋友可以學(xué)習(xí)下
2013-06-06
jQuery+PHP星級(jí)評(píng)分實(shí)現(xiàn)方法
很多網(wǎng)站都應(yīng)用了星級(jí)評(píng)分效果，讓用戶可以對(duì)正在瀏覽的文章、電影、資源等進(jìn)行評(píng)分，讓網(wǎng)站增添了幾分互動(dòng)效果。本文將講解如何使用jQuery和PHP來(lái)實(shí)現(xiàn)星級(jí)評(píng)分效果。
2015-10-10
淺談jQuery 中的事件冒泡和阻止默認(rèn)行為
下面小編就為大家?guī)?lái)一篇淺談jQuery 中的事件冒泡和阻止默認(rèn)行為。小編舉得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
jQuery實(shí)現(xiàn)鼠標(biāo)滾動(dòng)圖片延遲加載效果附源碼下載
本文給大家分享jquery技術(shù)實(shí)現(xiàn)圖片延時(shí)加載效果，本特效沒(méi)有使用專門(mén)的圖片延遲加載插件，只需要一小段jQuery代碼就實(shí)現(xiàn)了圖片延遲加載，使用非常方便，需要的朋友可以下載源碼
2016-06-06
jquery實(shí)現(xiàn)圖片無(wú)縫滾動(dòng) 蒙版遮蔽效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)，蒙版遮蔽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01
基于jquery的一個(gè)簡(jiǎn)單的腳本驗(yàn)證插件
基于jquery的一個(gè)簡(jiǎn)單的腳本驗(yàn)證插件，希望能對(duì)大家有所幫助，有demo
2010-04-04