Как скрыть дочерние категории?

360

03 сентября 2017, 02:41

Как сделать скрытие вложений в дереве категорий ? На главную категорию нажимаю и что бы дочерние скрылись. или подскажите какие события почитать JQuery что бы разобраться.

Answer 1

Контейнер .cat, название категории (оно же кнопка) .cat_label, контент категории .cat_sub - при нажатии на название категории открывается контент, в который можно вложить ту же конструкцию (работает в обе стороны, можно по дефолту задать display: block; при нажатии display: none;)

const catLabel = $('.cat').children('.cat_label'); 
 
catLabel.on('click', toggleSubCat); 
 
function toggleSubCat() { 
  $(this).siblings('.cat_sub').toggleClass('show'); 
}

.cat_sub { 
  display: none; 
} 
 
.cat_sub.show { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="cat"> 
  <button class="cat_label">Category #1</button> 
  <div class="cat_sub"> 
    <div class="cat"> 
      <button class="cat_label">Category #1 sub</button> 
      <div class="cat_sub"> 
        <div class="cat"> 
          <button class="cat_label">Category #1 zag zag</button> 
          <div class="cat_sub"> 
 
          </div> 
        </div> 
        <div class="cat"> 
          <button class="cat_label">Category #1 zag zag</button> 
          <div class="cat_sub"> 
 
          </div> 
        </div> 
        <div class="cat"> 
          <button class="cat_label">Category #1 zag zag</button> 
          <div class="cat_sub"> 
 
          </div> 
        </div> 
      </div> 
    </div> 
    <div class="cat"> 
      <button class="cat_label">Category #2 sub</button> 
      <div class="cat_sub"> 
        <div class="cat"> 
          <button class="cat_label">Category #2 zag zag</button> 
          <div class="cat_sub"> 
            <div class="cat"> 
              <button class="cat_label">Category #2 zag zag zag</button> 
              <div class="cat_sub"> 
                <div class="cat"> 
                  <button class="cat_label">Category #2 zag zag zag zag</button> 
                  <div class="cat_sub"> 
 
                  </div> 
                </div> 
              </div> 
            </div> 
            <div class="cat"> 
              <button class="cat_label">Category #2 zag zag zag</button> 
              <div class="cat_sub"> 
 
              </div> 
            </div> 
            <div class="cat"> 
              <button class="cat_label">Category #2 zag zag zag</button> 
              <div class="cat_sub"> 
 
              </div> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>