0

подскажите пожалуйста есть 7 списков (li), на один я повесил клик для появление блока с текстом снизу. Как сделать для оставшихся 6, чтобы не менять и не делать разные классы ? Можно ли для одинаковых классов сделать событие click. (Блок в виде списка ul и li)

 $('.faq-item').click(function () {
    $('.faq-item__hide').toggle();
    $('.fas.fa-chevron-up.fa-up').toggleClass('animate-rotate');
  });
<ul class="faq-list">
<li class="faq-item">I have doubts.<i class="fas fa-chevron-up fa-up"></i>
<p class="faqitem__hide">llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll.</p></li>
</ul>

8
  • Ну можно. в текущнм коде это должно работать. В чём проблема? 20 дек 2021 в 14:44
  • Проблема нажимаешь на любой из семи блоков открывается первый, а не каждый по отдельности. 20 дек 2021 в 14:45
  • Это совсем другая проблема, не та, что описана в вопросе 20 дек 2021 в 14:46
  • $('.faq-item__one').click(function () { $('.faq-hide__one').toggle(); $('.fa-up__one').toggleClass('animate-rotate'); }); $('.faq-item__two').click(function () { $('.faq-hide__two').toggle(); $('.fa-up__two').toggleClass('animate-rotate'); }); При дублировании, меняешь класс все работает. Но как этого избежать, чтобы это не копировать ? 20 дек 2021 в 14:48
  • Проблема просто заключается в том, что нужно следить не за общими классами, а классами контекста, то есть применять например $(this) в связке с .next или children и т.д. 20 дек 2021 в 14:48

1 ответ 1

0

$(document).on('click', '.faq-item', function() {
  $(this).children('.faqitem__hide').toggle();
  $(this).children('.fa-up').toggleClass('animate-rotate');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<ul class="faq-list">
  <li class="faq-item">I have doubts.<i class="fas fa-chevron-up fa-up"></i>
    <p class="faqitem__hide">llllllllllllllllllllll.</p>
  </li>
  
  <li class="faq-item">222.<i class="fas fa-chevron-up fa-up"></i>
    <p class="faqitem__hide">222 text .</p>
  </li>
  
  <li class="faq-item">333.<i class="fas fa-chevron-up fa-up"></i>
    <p class="faqitem__hide">333 text.</p>
  </li>
</ul>

1
  • Алексей большое спасибо ! Дай бог вам здоровья ! 20 дек 2021 в 14:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.