jQuery класс аккордеона, применяющий класс ко ВСЕМ панелям вместо одного - PullRequest
Новая
       36

jQuery класс аккордеона, применяющий класс ко ВСЕМ панелям вместо одного

0 голосов
/ 12 марта 2020

Я пытаюсь сделать простой аккордеон. Для каждого аккордеона, когда я нажимаю кнопку заголовка, я хочу, чтобы панель отображалась. Когда я нажимаю кнопку заголовка одной из них, она открывает ВСЕ панели, а не ее родного брата.

Это то, что у меня есть. Если кто-нибудь может сказать мне, где я иду не так, это было бы здорово. 

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

Ответы [ 2 ]

1 голос
/ 12 марта 2020

Вы применяете класс на всех панелях одновременно. Применить только к тому, на каком заголовке панели нажимается.

Пожалуйста, проверьте этот код один раз 

$(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>
0 голосов
/ 12 марта 2020

Вам также необходимо использовать 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>

(и вам нужно будет добавить функцию для удаления класса из всех других панелей аккордеона)

...