js、jq实现导航菜单

<div class="name">
<span>菜单1</span>
<ul>
<li>栏目1</li>
<li>栏目2</li>
<li>栏目3</li>
</ul>
</div>
<div class="name">
<span>菜单2</span>
<ul>
<li>栏目1</li>
<li>栏目2</li>
<li>栏目3</li>
</ul>
</div>
<div class="name">
<span>菜单3/span>
<ul>
<li>栏目1</li>
<li>栏目2</li>
<li>栏目3</li>
</ul>
</div>
<div class="name">
<span>菜单4</span>
<ul>
<li>栏目1</li>
<li>栏目2</li>
<li>栏目3</li>
</ul>
</div>

.displayshow{
color:blue;
background: #ccc;
}

$(".name").children("ul").hide();//隐藏所有子元素
$(".planname").click(function() {
$(this).addClass("displayshow")//添加显示的class
.children("ul").show().end()//显示所有子元素
.siblings().removeClass("displayshow")//移除class
.children("ul").hide();//影藏兄弟元素的子元素
});