JQUERY相同HTML结构如何点击显示对应DIV

Question

<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图供参考：

Answer 1

<div class="box">
    <div class="list">分类1</div>
    <div class="list">分类2</div>
    <div class="list">分类3</div>
    <div class="list">分类4</div>
    <div class="list">分类5</div>
</div>



<div class="content">
    <div class="cate">
        <div>分类1-1</div>
        <div>分类1-2</div>
        <div>分类1-3</div>
        <div>分类1-4</div>
        <div>分类1-5</div>
    </div>
    <div class="cate">
        <div>分类2-1</div>
        <div>分类2-2</div>
        <div>分类2-3</div>
        <div>分类2-4</div>
        <div>分类2-5</div>
    </div>
    ...
    <div class="cate">
        <div>分类5-1</div>
        <div>分类5-2</div>
        <div>分类5-3</div>
        <div>分类5-4</div>
        <div>分类5-5</div>
    </div>
</div>



$('.list').on('click',function(){
    var _index=$(this).index();
    $(this).show().siblings().hide();
    $(".content .cate").eq(_index).show().siblings().hide();
})

Answer 2

先改 html 结构.

<div class="Level01">
       <h2>Cat1</h2>
       <ul class="Level02list">
           <li class="level02">Cat1-1</li>
           <li class="level02">Cat1-2</li>
       </ul>
   </div>
   <div class="Level01">
       <h2>Cat2</h2>
       <ul class="Level02list">
           <li class="level02">Cat2-1</li>
           <li class="level02">Cat2-2</li>
       </ul>
   </div>
   <div class="Level01">
       <h2>Cat3</h2>
       <ul class="Level02list">
           <li class="level02">Cat3-1</li>
           <li class="level02">Cat3-2</li>
       </ul>
   </div>

然后 jQuery
bind 个点击事件,每次所有 level01 去掉 active class, 然后当前点击 level01 单独添加 active class 即可

$(.level01).removeClass("active");
$( this ).addClass("active");

最后 css 指定

.level02list {display:none;}
.active .level02list {display:block;}

Answer 3

要是使用的是jQuery的话，获取触发事件元素的下标index()，然后匹配.content元素的下标实现对应项。