JQUERY相同结构如何点击显示隐藏对应DIV？

[testerAPP]

<div class="box">
    <div class="list">分类1</div>
    <div class="list">分类2</div>
</div>
<div class="box">
    <div class="list">分类3</div>
    <div class="list">分类4</div>
</div>
<div class="box">
    <div class="list">分类5</div>
</div>
<!--...省略n个box...-->
<div class="content">
    <div class="cate">分类1-1</div>
    <div class="cate">分类2-1</div>
</div>
<div class="content">
    <div class="cate">分类3-1</div>
    <div class="cate">分类4-1</div>
</div>
<div class="content">
    <div class="cate">分类5-1</div>
</div>
<!--...省略n个content...-->

代码如上，box和content及子级数量对应，content默认隐藏，点击分类2显示对应content里子级里分类2-1，点击其它隐藏上一个显示的对应DIV，其它操作同理。请问，不同级如何让他点击显示并隐藏上一个？

为了更好的理解，附加GIF图供参考：

[天际的海浪]

$(function(){
	$(".box").on("click", ".list", function(event){
		$(".content .cate").hide().eq($(".box .list").index(this)).show();
	});
});

[天际的海浪]

解决了你就结下帖吧

[testerAPP]

引用 3 楼 jslang 的回复:

解决了你就结下帖吧

不好意思，才来CSDN不知道还有结贴这一说，抱歉。

[testerAPP]

引用 1 楼 jslang 的回复:

$(function(){
	$(".box").on("click", ".list", function(event){
		$(".content .cate").hide().eq($(".box .list").index(this)).show();
	});
});

- -，解决了，太感谢您这两天的帮助了，解决了我的大问题啊，不过熬夜不好，身体最重要。谢谢你啦！~