Question

js中关于给两层的li标签添加class的问题，求大神解答！

如下代码，ul下有li标签，li标签下包着ul标签，下面还有一层li标签。有两层的li标签，点击第一层li标签，会给点击的li标签加上class=“submenu open”的样式（展开列表，没点击之前是class=“submenu”），主要是第二层的li标签点击以后，本身会加上class=“active” ，同时给自己的上一级li标签加上class=“submenu active open” 的样式，请问如何实现？

<div id="sidebar">
<a href="#" class="visible-phone"><i class="icon icon-home"></i> 主页</a>
<ul id="jj">
<li ><a href="index.html"><i class="icon icon-home"></i> <span>主页</span></a></li>
<li class="submenu active open">
<a href="#"><i class="icon icon-th-list"></i> <span></span> <span class="label">8</span></a>
<ul>
<li class="active"><a href="#">1</a></li>
<li ><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="{#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
</ul>
</li>
<li class="submenu">
<a href="buttons.html"><i class="icon icon-tint"></i> <span>溪口旅游</span> <span class="label">6</span></a>
<ul>
<li ><a href="#">1</a></li>
<li ><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</li>
</ul>

</div>

Answer 1

你应该是想实现风琴菜单或者类似效果的吧？推荐使用jquery（轻量级的js封装组件）很方便的实现了风琴菜单。一定要用js的话代码太长了我给你点思路。首先为元素绑定onclick事件，一级li和二级li区别对待。你没说清楚哪里不明白，我就猜一下你是不知道如何选中二级节点的父节点。选中当前节点的父节点的方法是this.parentNode就是当前节点的父节点了。你可以if this.onclick 那么this.parentNode.class就改为什么什么。你试试

Answer 2

$(function(){
	$(".submenu").click(function(){
		$(".active").removeClass("active");
		$(".active2").removeClass("active2");
		$(this).addClass("active");
	});
	
	$(".submenu>ul>li").click(function(){
		$(".active").removeClass("active");
		$(".active2").removeClass("active2");
		$(this).parent().parent(".submenu").addClass("active");
		$(this).addClass("active2");
	});
});

这里要给下级菜单再写一个active2的css样式

我测试了一下，不知道为什么，用一个样式不得行

这里用的是jquery的版本，如果你要原生js的版本再追问

而且我觉得这里还有一个问题，因为所有的2级菜单初始状态都是隐藏的，所以，只有在点击1级菜单才会展开，这时已经点击了1级菜单，1级菜单就应该有active样式了，这里好像只需要给2级菜单添加个点击事件再加个active样式就可以了。。。不需要再给他的1级菜单添加一次样式

追问

第一个给父级li标签加样式没问题了，但是第二个有问题，一点击子级li标签，就所有的样式都消失了，不管是父级还是子级，主要是加载内容的时候可能有一次刷新，所有可能样式都没有了，这个问题怎么解决？还有active2是哪里来的？子级的也是active，求大神解答。