Нацелить конкретную кнопку цели данных при использовании нескольких элементов сворачивания Bootstrap?

Я использую несколько элементов сворачивания начальной загрузки на своем веб-сайте. Элементы сворачивания управляются кнопками «подробнее», в которых есть значок, который меняется в зависимости от состояния элемента сворачивания. Я добиваюсь этого, добавляя класс к кнопке. Проблема в том, что класс добавляется ко всем кнопкам. Как добавить класс только к определенной кнопке элемента сворачивания?

Вот код:

<div class="collapse extra-text" id="collapse1">
                                <p class="">Hidden text</p>
                              
</div>
<p>
  <a class="read-more" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapseExample">Read more </a>
</p>

JS я использую:

 <script>
    $('.extra-text').on('hidden.bs.collapse', function () {
     $('.read-more').removeClass('active');
    
    });
    $('.extra-text').on('shown.bs.collapse', function () {
           $('.read-more').addClass('active');
    });
   </script>

И CSS:

a.read-more:after {

    font-family: "Font Awesome 5 Free";
    content: "\f078";
    display: inline-block;
    transition: all 0.5s;
}


a.read-more.active:after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

javascript jquery twitter-bootstrap bootstrap-5
person Anton Lipovskoy    schedule 19.02.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать методы .prev() и .find() для доступа к предыдущему элементу из свернуть div, а затем добавить/удалить класс там.

Демонстрационный код:

$('.extra-text').on('hidden.bs.collapse', function(e) {
  //get prev elements > p tag and then use .find to get readmore tag
  $(this).prev().find('a.read-more').removeClass('active');
});
$('.extra-text').on('shown.bs.collapse', function(e) {
  $(this).prev().find('a.read-more').addClass('active');
});
a.read-more::after {
  font-family: "Font Awesome 5 Free";
  content: "\f078";
  display: inline-block;
  transition: all 0.5s;
  font-weight: 900;
}

a.read-more.active:after {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>

<p>
  <a class="read-more" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapseExample">Read more </a>
</p>
<div class="collapse extra-text" id="collapse1">
  <p class="">Hidden text</p>

</div>

<p>
  <a class="read-more" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapseExample">Read more </a>
</p>
<div class="collapse extra-text" id="collapse2">
  <p class="">Hidden text</p>

</div>

person Swati    schedule 19.02.2021