JQUERY多个DIV点击显示隐藏问题...

Question

HTML结构

<div class="box">
    <div class="list">
        <p class="active">分类名1</p>
        <p>分类名2</p>
    </div>
    <div class="item">
        <div class="item-list cur">
            <p>子分类1</p>
            <p>子分类2</p>
            <p>子分类3</p>
            <p>子分类4</p>
            <p>子分类5</p>
        </div>
        <div class="item-list">
            <p>子分类1</p>
            <p>子分类2</p>
            <p>子分类3</p>
            <p>子分类4</p>
            <p>子分类5</p>
        </div>
    </div>
</div>

javascript

var list_li = $('.list p');
list_li.click(function(){
    $(this).addClass('active').siblings().removeClass('active');
    var index = list_li.index(this);
    $('.item .item-list').eq(index).addClass('cur').siblings().removeClass('cur');
});

当前，点击list里的分类名就会像tab一样切换，点击那个分类名，显示当前点击分类下的子分类。想要实现的效果是不仅可以切换，还有就是，如果item-list里的p标签如果大于2，就会隐藏当前显示的其它子分类，并在最后插入一个全部（如果其它子分类小于或等于2则不会插入全部字样），当点击全部后展开当前显示分类下所有子分类，并把全部改为展开，再点击这个展开会收起来又只显示2个子分类。请问用JQUERY该如何实现？非常感谢！~

Answer 1

下面是一种方案，太久时间没用jquery了，可能代码不够优雅，你自己优化下，希望能帮到你。

css部分

    .list p{
      display: inline-block;
    }
    .list .active{
      color: red;
    }
    .item-list {
      display: none;
    }
    .cur {
      display: block;
    }

js部分

    var list_li = $('.list p')
    list_li.click(function() {
      $(this).addClass('active').siblings().removeClass('active');
      var index = list_li.index(this);
      $('.item .item-list').eq(index).addClass('cur').siblings().removeClass('cur');

      if ($('.item .cur').children('p').length > 2) {
        if ($('.item .cur span:last').length === 0) {
          // 遍历并隐藏大于2的子元素
          $('.item .cur').children('p').each(function (index, element) {
            if (index > 1) {
              $(element).css("display", "none");
            }
          })
        }
        // 尾部添加显示全部
        let showAll = document.createElement('span')
        showAll.innerHTML = '显示全部'
        showAll.onclick = function (e) {
          if (e.target.innerHTML === '显示全部') {
            // 遍历并显示所有子元素
            $('.item .cur').children('p').each(function (index, element) {
              if (index > 1) {
                $(element).css("display", "block");
              }
            })
            // 改变文字
            e.target.innerHTML = '收缩全部'
          } else {
            e.target.innerHTML = '显示全部'
            // 遍历并显示所有子元素
            $('.item .cur').children('p').each(function (index, element) {
              if (index > 1) {
                $(element).css("display", "none");
              }
            })
          }
        }
        // 防止切换时反复添加
        if ($('.item .cur span:last').length === 0) {
          $('.item .cur').append(showAll)
        }
      }
    });