jQuery手风琴将类应用于所有面板而不是一个

Question

我正在尝试制作一个简单的手风琴。对于每个手风琴，当我单击标题按钮时，我都希望该面板显示出来。当我单击其中一个的标题按钮时，它将打开所有面板，而不是同级。

这就是我所拥有的。如果有人可以告诉我我要去哪里错，那太好了。

(function(d,w,$) {

  $('.accordion').each(function() {
    $(this).find('.accordion-btn').click(function() {
      $('.accordion-panel').toggleClass('accordion-open');
    });
  });

})(document, window, jQuery);

.accordion-btn {
  background-color: #ccc;
  cursor: pointer;
}

.accordion-panel {
  background: #eee;
  transition: ease 0.4s;
}

.accordion-open {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="event accordion">
  <div class="accordion-btn"><h2>Title Here</h2></div>
  <div class="accordion-panel">Text content here</div>
</div>

<div class="event accordion">
  <div class="accordion-btn"><h2>Title Here</h2></div>
  <div class="accordion-panel">Text content here</div>
</div>

<div class="event accordion">
  <div class="accordion-btn"><h2>Title Here</h2></div>
  <div class="accordion-panel">Text content here</div>
</div>

Answer 1

您正在一次在所有面板上上课。仅应用单击面板标题的位置。

请检查一次此代码

$(function() {
    $('.accordion-btn').click(function() {
      $('.accordion-panel').removeClass('accordion-open')
      $(this).parent('.accordion').find('.accordion-panel').toggleClass('accordion-open');
    });
});

.accordion-btn {
  background-color: #ccc;
  cursor: pointer;
}

.accordion-panel {
  background: #eee;
  transition: ease 0.4s;
}

.accordion-open {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="event accordion">
  <div class="accordion-btn"><h2>Title Here</h2></div>
  <div class="accordion-panel">Text content here</div>
</div>

<div class="event accordion">
  <div class="accordion-btn"><h2>Title Here</h2></div>
  <div class="accordion-panel">Text content here</div>
</div>

<div class="event accordion">
  <div class="accordion-btn"><h2>Title Here</h2></div>
  <div class="accordion-panel">Text content here</div>
</div>

Answer 2

您还需要在切换类的行中使用this（此处与.siblings结合使用，以将该功能限制为单击的按钮的同级元素：

(function(d,w,$) {

  $('.accordion').each(function() {
    $(this).find('.accordion-btn').click(function() {
      $(this).siblings('.accordion-panel').toggleClass('accordion-open');
    });
  });

})(document, window, jQuery);

.accordion-btn {
  background-color: #ccc;
  cursor: pointer;
}

.accordion-panel {
  background: #eee;
  transition: ease 0.4s;
}

.accordion-open {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="event accordion">
  <div class="accordion-btn"><h2>Title Here</h2></div>
  <div class="accordion-panel">Text content here</div>
</div>

<div class="event accordion">
  <div class="accordion-btn"><h2>Title Here</h2></div>
  <div class="accordion-panel">Text content here</div>
</div>

<div class="event accordion">
  <div class="accordion-btn"><h2>Title Here</h2></div>
  <div class="accordion-panel">Text content here</div>
</div>