JQUERY遍历问题

Question

<div class="box">
     <div class="cate-title">一级分类1-1</div>
     <div class="item-list">
          <div class="cate-two">二级分类1-1</div>
          <div class="cate-three">
               <a href="#">三级分类1-1</a>
               <a href="#">三级分类1-n</a>
          </div>
           <div class="cate-two">二级分类1-n</div>
          <div class="cate-three">
               <a href="#">三级分类1-2-1</a>
               <a href="#">三级分类1-2-n</a>
          </div>
     </div>
     <div class="cate-title">一级分类2-1</div>
     <div class="item-list">
          <div class="cate-two">二级分类2-1</div>
          <div class="cate-three">
               <a href="#">三级分类2-1</a>
               <a href="#">三级分类2-n</a>
          </div>
           <div class="cate-two">二级分类2-n</div>
          <div class="cate-three">
               <a href="#">三级分类2-2-1</a>
               <a href="#">三级分类2-2-n</a>
          </div>
     </div>
</div>

HTML结构如上，默认显示1级和二级分类，三级分类隐藏，点击二级分类显示对应也就是cate-two下面的cate-three三级分类给CLASS加上show，如果再点击隐藏，点击下一个二级分类同理，请问，如何使点击下一个二级分类也就是一级分类2-1里的二级分类显示三级分类的同时隐藏上一个二级分类1-1下的三级分类呢？

为了便于理解，下面附GIF动图

Answer 1

$('.cate-two').click(function() {
    var targetCateThree = $(this).next('.cate-three'); // 需要显示或者隐藏的.cate-three

    $('.cate-three').not(targetCateThree).removeClass('show'); // 除了需要显示或隐藏的.cate-three，其余的都去掉show类
    targetCateThree.toggleClass('show'); // 切换目标.cate-three元素的show类
});

Answer 2

简单的,可以设置个变量,存储上个三级分类的引用.
这样在显示下个三级分类的同时,可以根据引用隐藏掉上个三级分类.

Answer 3

首先，我觉得你dom这样的结构，不是很符合逻辑的，这样会好些，虽然嵌套多了。

<div class="box">
  <div class="cate-one">
    <div class="title">一级分类1-1</div>
    <div class="item-list">
      <div class="cate-two">
        <div class="title">二级分类1-1</div>
        <div class="item-list">
          <div class="cate-three">
            <a href="#">三级分类1-1-1</a>
            <a href="#">三级分类1-1-n</a>
          </div>
        </div>
      </div>
      <div class="cate-two">
        <div class="title">二级分类1-n</div>
        <div class="item-list">
          <div class="cate-three">
            <a href="#">三级分类1-n-1</a>
            <a href="#">三级分类1-n-n</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

dom应该也要符合业务逻辑上的嵌套关系。这样一更符合实际，二也更便于jquery操作。

$('.cate-two').on('click', function () {
  $('.cate-two > .item-list').hide();
  $(this).children('.item-list').show();
})