0

Есть свайпер со слайдами. Все слайды имеют одинаковые классы. В слайдах есть ul, в которой показаны только первые четыре li, а остальные должны показывать после нажатия на кнопку "Подробнее...". Но в прописанном мной JS-коде класс даётся всем li во всех родителях, когда как только надо в слайде где была нажата кнопка.

//HTML
 <div class="swiper-slide first-slide ">
                                <h4>Подготовка к школе</h4>
                                <span class="tenge-price">30 000 тг</span>
                                <div class="age-and-time">
                                    <p>4-6 лет</p>
                                    <p class="mb60"><span>3 занятия</span> в неделю по <span>3 ч.</span></p>
                                    <ul>
                                        <li>Обучение чтению </li>
                                        <li>Письмо</li>
                                        <li>Математика</li>
                                        <li>Английский язык</li>
                                        <li>Развитие речи</li>
                                        <li>Концентрация внимания</li>
                                        <li>Усвоение изучаемого материала</li>
                                        <li>Различные техники запоминания</li>
                                        <li>Развитие логико-математического мышления</li>
                                    </ul>
                                    <button  class="more">Подробнее...</button>
                                    <a href="#">Выбрать</a>
                                </div>
                            </div>
                            <div class="swiper-slide second-slide">
                                <h4>скорочтение</h4>
                                <span class="tenge-price">27 000 тг</span>
                                <div class="age-and-time">
                                    <p>6-15 лет</p>
                                    <p class="mb60"><span>3 занятия</span> в неделю по <span>1 ч.</span></p>
                                    <ul>
                                        <li>Увеличение скорости чтения</li>
                                        <li>Артикуляция</li>
                                        <li>Развитие речи</li>
                                        <li>Развитие внимания</li>
                                        <li>Увеличение поля зрения</li>
                                        <li>Увеличение словарного запаса</li>
                                        <li>Понимание прочитанного</li>
                                        <li>Пересказ</li>
                                        <li>Различные техники понимания</li>
                                        <li>Пробный урок и диагностика БЕСПЛАТНО</li>
                                    </ul>
                                    <a href="#">Выбрать</a>
                                </div>
                            </div>
//CSS
.age-and-time ul li:nth-child(n + 5) {
    display: none;
}
.li_on{
    display: block !important;
}
.more {
    font-family: Commissioner;
    font-size: 24px;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: 0em;
    color: #018FA3;
    background: transparent;
    border: none;
    margin-bottom: 60px;
}


.more__none{
    display: none;
}
//JS

 var more = $('.more');
   var li_off = $('.age-and-time ul li:nth-child(n + 5)')

   more.click(function(){
    more.toggleClass('more__none');
    li_off.toggleClass('li_on');
   });

1 ответ 1

0

Если класс нужен только для того чтобы показать\скрыть элементы, лучше воспользоваться функцией toggle()..

var more = $('.more');

more.click(function() {
  //$(this).toggle(); //скрыть кнопку подробнее
  $("ul li:nth-child(n + 5)", this.parentNode).toggle();
  
  //more.toggleClass('more__none');
  //$("ul li:nth-child(n + 5)", this.parentNode).toggleClass('li_on');
});
.age-and-time ul li:nth-child(n + 5) {
  display: none;
}

.more {
  font-family: Commissioner;
  font-size: 24px;
  font-weight: 400;
  line-height: 29px;
  letter-spacing: 0em;
  color: #018FA3;
  background: transparent;
  border: none;
  margin-bottom: 60px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swiper-slide first-slide ">
  <h4>Подготовка к школе</h4>
  <span class="tenge-price">30 000 тг</span>
  <div class="age-and-time">
    <p>4-6 лет</p>
    <p class="mb60"><span>3 занятия</span> в неделю по <span>3 ч.</span></p>
    <ul>
      <li>Обучение чтению </li>
      <li>Письмо</li>
      <li>Математика</li>
      <li>Английский язык</li>
      <li>Развитие речи</li>
      <li>Концентрация внимания</li>
      <li>Усвоение изучаемого материала</li>
      <li>Различные техники запоминания</li>
      <li>Развитие логико-математического мышления</li>
    </ul>
    <button class="more">Подробнее...</button>
    <a href="#">Выбрать</a>
  </div>
</div>
<div class="swiper-slide second-slide">
  <h4>скорочтение</h4>
  <span class="tenge-price">27 000 тг</span>
  <div class="age-and-time">
    <p>6-15 лет</p>
    <p class="mb60"><span>3 занятия</span> в неделю по <span>1 ч.</span></p>
    <ul>
      <li>Увеличение скорости чтения</li>
      <li>Артикуляция</li>
      <li>Развитие речи</li>
      <li>Развитие внимания</li>
      <li>Увеличение поля зрения</li>
      <li>Увеличение словарного запаса</li>
      <li>Понимание прочитанного</li>
      <li>Пересказ</li>
      <li>Различные техники понимания</li>
      <li>Пробный урок и диагностика БЕСПЛАТНО</li>
    </ul>
    <button class="more">Подробнее...</button>
    <a href="#">Выбрать</a>
  </div>
</div>

2
  • большое спасибо! а то с JS я знаком поверхностно
    – Burr_DI
    4 авг 2022 в 10:22
  • @Burr_DI На здоровье! :)
    – Rudi
    4 авг 2022 в 10:41

Ваш ответ

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

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