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

Question

[hello-world-1]

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

<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>

.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}

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

Comments

[0xD34F]

Потому что вы не понимаете, что возвращает функция $. Разберитесь.

[hello-world-1]

0xD34F, Спасибо!

Answer 1

[Владислав Черненко]

Логика такая:

$(".btn").click(function () {
  $(this).parent().prevAll().find(".menu").removeClass("active");
  $(this).parent().nextAll().find(".menu").removeClass("active");
  $(this).next().toggleClass("active");
});

.menu.active {
  display: block;
}

Хз насколько синтаксис красив, но работает)