js、jq实现导航菜单

html内容

<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>

css内容：

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

js/jq部分：

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

 

转载于:https://my.oschina.net/u/3359895/blog/1555289