Добавление и удаление класса на активном аккордеонном элементе переключения - PullRequest
Новая
       36

Добавление и удаление класса на активном аккордеонном элементе переключения

1 голос
/ 27 апреля 2019

У меня есть Jquery Code для аккордеона, и он работает хорошо, за исключением того, что мне нужно добавить / удалить класс при активном триггере.Я имею в виду, что при щелчке по элементу H2 мне нужно добавить класс «аккордеон-переключаемый».Код, показанный здесь, добавляет класс ко всем элементам H2 при переключении, и мне нужно только добавить его в активную H2.

Я мог бы помочь с этим. 

$(document).ready(function(){
   $('div.accordion-content> p').hide();  
   $('div.accordion-content> h2').click(function() {
     $(this).next('p').slideToggle('fast')
     .siblings('p:visible').slideUp('fast');
     $('div.accordion-content> h2').toggleClass('accordion-toggled');
   });
});

HTML 

<div class="accordion-content">
   <h2>Question 1</h2>
   <p>Some answers for question 1</p>
   <h2>Question 2</h2>
   <p>Some answers for question 2</p>
   <h2>Question 3</h2>
   <p>Some answers for question 3</p>
</div>

1 Ответ

1 голос
/ 27 апреля 2019

Используя ключевое слово this, вы можете ссылаться на элемент, который вы только что нажали: 

$(document).ready(function(){
   $('div.accordion-content> p').hide();  
   $('div.accordion-content> h2').click(function() {
     $(this).next('p').slideToggle('fast')
     .siblings('p:visible').slideUp('fast');
      $(this).toggleClass('accordion-toggled');
      $('div.accordion-content> h2').not(this).removeClass('accordion-toggled');
   });
});
.accordion-toggled{
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-content">
   <h2>Question 1</h2>
   <p>Some answers for question 1</p>
   <h2>Question 2</h2>
   <p>Some answers for question 2</p>
   <h2>Question 3</h2>
   <p>Some answers for question 3</p>
</div>
...