导航菜单特效-树形导航菜单
————————————————————————————
<script type="text/javascript">
//在jquery的加载回调函数里指定操作内容
$(function(){
//定义所有的属性菜单的click事件
$('.tree a').click(function(){
//找到下一个菜单
var p = $(this).parent().next();
//如果该菜单是本级菜单的子菜单，则显示或者不显示
while($(p).attr('class') == 'menu2'){
$(p).toggle(); //显示或不显示交叉
p = $(p).next();//循环找到下一个mune2的子菜单
}
});
});
</script>
——————————————————————————————
<style>
.tree{
width:150px;
border: 1px solid black;
margin:0 auto;
}
.tree a:hover{
background-color: pink;
}
.tree p{
margin:5px 0;
text-align: left;
}
.menu1{
padding-left:5px;
margin:0;
}
.menu2{
padding-left:20px;
margin:0;
display: none;
}
</style>
——————————————————————————
<body style="text-align:center">
<div class="tree">
<p class="menu1"><a href="#">菜单1</a></p>
<p class="menu2"><a href="#">菜单2</a></p>
<p class="menu1"><a href="#">菜单1</a></p>
<p class="menu2"><a href="#">菜单2</a></p>
<p class="menu2"><a href="#">菜单2</a></p>
<p class="menu2"><a href="#">菜单2</a></p>
<p class="menu1"><a href="#">菜单1</a></p>
<p class="menu2"><a href="#">菜单2</a></p>
<p class="menu2"><a href="#">菜单2</a></p>
</div>
</body>
——————————————————————————
