JavaScript无限极菜单
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
<meta charset="utf-8" />
<style>
h2 {margin: 0; padding: 0;}
#ul1 ul {display: none;}
#ul1 .next {color: red;}
</style>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script>
$(function(){
$('#ul1 li').find('h2').click(function(){
var oUl = $(this).parent().find('ul')[0];
var aUl = $(this).parent().siblings('li').find('ul');
$(aUl).slideUp();
$(aUl).not(oUl).attr('bClk',false);
if($(oUl).attr('bClk')=='true'){
$(oUl).slideUp().attr('bClk',false);
$(oUl).find('ul').slideUp().attr('bClk',false);
}else{
$(oUl).slideDown().attr('bClk',true);
}
})
});
</script>
</head>
<body>
<ul >
<li><h2>1111</h2></li>
<li><h2 class="next">2222</h2>
<ul>
<li><h2 class="next">aaaa</h2>
<ul>
<li><h2>aaaa</h2></li>
<li><h2>bbbb</h2></li>
<li><h2>cccc</h2></li>
<li><h2>dddd</h2></li>
</ul>
</li>
<li><h2 class="next">aaaa</h2>
<ul>
<li><h2>aaaa</h2></li>
<li><h2 class="next">bbbb</h2>
<ul>
<li><h2>aaaa</h2></li>
<li><h2>bbbb</h2></li>
<li><h2>cccc</h2></li>
<li><h2>dddd</h2></li>
</ul>
</li>
<li><h2 class="next">cccc</h2>
<ul>
<li><h2>aaaa</h2></li>
<li><h2>bbbb</h2></li>
<li><h2>cccc</h2></li>
<li><h2>dddd</h2></li>
</ul>
</li>
<li><h2>dddd</h2></li>
</ul>
</li>
<li><h2>cccc</h2></li>
<li><h2>dddd</h2></li>
</ul>
</li>
<li><h2 class="next">3333</h2>
<ul>
<li><h2 class="next">aaaa</h2>
<ul>
<li><h2>aaaa</h2></li>
<li><h2>bbbb</h2></li>
<li><h2>cccc</h2></li>
<li><h2>dddd</h2></li>
</ul>
</li>
<li><h2 class="next">aaaa</h2>
<ul>
<li><h2>aaaa</h2></li>
<li><h2>bbbb</h2></li>
<li><h2>cccc</h2></li>
<li><h2>dddd</h2></li>
</ul>
</li>
<li><h2>cccc</h2></li>
<li><h2>dddd</h2></li>
</ul>
</li>
<li><h2>4444</h2>
</li>
</ul>
</body>
</html>来源：http://bbs.miaov.com/forum.php?mod=viewthread&tid=6112&page=1#pid16332
相关推荐
css+javascript下拉菜单
http://blog.ybj86.cn/article.asp?id=132
时间：2023-11-08 20:47
