请教多级菜单项，用Jq定义当前样式active！

[sess520]

请教关于用jq定义当前class，点击当前li，在下面的ul中增加active。另外一级菜单是互斥的，不能同时展开，请问该如何写jq？写了一个，有点问题，还请高手们指教。

<ul class="test">
		<li>一级菜单1
                        <ul class="sub_menu active">
				<li>二级菜单1</li>
				<li>二级菜单2</li>
				<li>二级菜单3
					<ul class="sub_menu active">
						<li>三级菜单1</li>
						<li>三级菜单2</li>
						<li>三级菜单3</li>
					</ul>
				</li>
			</ul>
                </li>
		<li>一级菜单2
			<ul class="sub_menu active">
				<li>二级菜单1</li>
				<li>二级菜单2</li>
				<li>二级菜单3
					<ul class="sub_menu active">
						<li>三级菜单1</li>
						<li>三级菜单2</li>
						<li>三级菜单3</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>

.test li{margin-left:25px;widows: 100%;}
.sub_menu{display: none;}
.test .active{display: block;}

我写的如下，有些问题，在点击二级菜单的时候，把整个当前菜单都关闭了。

$(function (){
    $('li').click(function (){
        $(this).children('ul').toggleClass('active');
    });
})  

[天际的海浪]

停止事件冒泡

$(function (){
    $('li').click(function (event){
        $(this).children('ul').toggleClass('active');
        event.stopPropagation();
    });
})  

[sess520]

引用 1 楼 jslang 的回复:

停止事件冒泡

$(function (){
    $('li').click(function (event){
        $(this).children('ul').toggleClass('active');
        event.stopPropagation();
    });
})  

感谢指点！刚刚试了一下，确实可以，但是还有一个小的地方能不能优化？就是假如我现在把一级菜单1展开了，此时我点一级菜单2，能不能把一级菜单1收回，只展开一级菜单2呢？

[当作看不见]

引用 2 楼 sess520 的回复:

就是假如我现在把一级菜单1展开了，此时我点一级菜单2，能不能把一级菜单1收回，只展开一级菜单2呢？

点击的时候设置兄弟元素的display属性为none,点击对象设置block就可以

[天际的海浪]

引用 3 楼 qq_29594393 的回复:

[quote=引用 2 楼 sess520 的回复:] 就是假如我现在把一级菜单1展开了，此时我点一级菜单2，能不能把一级菜单1收回，只展开一级菜单2呢？

点击的时候设置兄弟元素的display属性为none,点击对象设置block就可以 [/quote]

$(function (){
    $('li').click(function (event){
        $(this).children('ul').toggleClass('active');
        $(this).siblings().children('ul').removeClass('active');
        event.stopPropagation();
    });
})  

[sess520]

引用 4 楼 jslang 的回复:

[quote=引用 3 楼 qq_29594393 的回复:] [quote=引用 2 楼 sess520 的回复:] 就是假如我现在把一级菜单1展开了，此时我点一级菜单2，能不能把一级菜单1收回，只展开一级菜单2呢？

点击的时候设置兄弟元素的display属性为none,点击对象设置block就可以 [/quote]

$(function (){
    $('li').click(function (event){
        $(this).children('ul').toggleClass('active');
        $(this).siblings().children('ul').removeClass('active');
        event.stopPropagation();
    });
})  

[/quote] 完美，perfect~~再次感谢！