Почему блок не сворачивается?

Question

Изучаю jQuery и возникла проблема. Все работает как надо, но при повторном клике на элемент, чтобы его закрыть, ничего не происходит. Объясните в чем проблема, пожалуйста. Пример https://jsfiddle.net/gbuodsqp/

Понимаю, что проблема с пониманием функции $, но разобраться пока не получилось.

$('.btn').click(function(){
$('.item').removeClass('active');
$(this).parent('.item').toggleClass('active');
});

.item.active .menu{display:block}
.btn{background:red;margin-bottom:10px;padding:10px;cursor:pointer}
.menu{display:none;background:green;margin-bottom:10px;padding:5px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="btn">Меню 1</div>
  <div class="menu">Меню 1 работает</div>
</div>
<div class="item">
  <div class="btn">Меню 2</div>
   <div class="menu">Меню 2 работает</div>
  </div>
</div>
<div class="item">
  <div class="btn">Меню 3</div>
  <div class="menu">Меню 3 работает</div>
</div>

Answer 1

$('.item').removeClass('active');

убирает класс active, у всех item.

$(this).parent('.item').toggleClass('active');

Данная же строка переключает класс active для родителя. Поскольку вы предварительно сняли класс у всех, то у родителя его уже тоже нет, и данная строка его добавляет обратно.

Как вывод тут - надо снимать active не у всех item, а у всех кроме родительского, то есть у соседних элементов. То есть как-то так

$(this).closest('.item').toggleClass('active')
       .siblings('.item').removeClass('active')

БЛОГ НА HUSL

Почему блок не сворачивается?

Ответы (1 шт):