Javascript 当使用几个引导折叠元素时，目标是特定的数据目标按钮？

我在我的网站上使用了几个引导折叠元素。折叠元素由“读取更多”按钮控制，这些按钮中有一个图标，该图标根据折叠元素的状态而变化。我通过向按钮添加一个类来实现这一点。问题是该类被添加到所有按钮中。如何仅将类添加到特定的折叠元素按钮

代码如下：

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

您可以使用

.prev（）

和

.find（）

方法从collapse div访问上一个元素，然后在其中添加/删除类

演示代码：

$（'.extra text'）.on（'hidden.bs.collapse'，函数（e）{
//获取prev elements>p标记，然后使用。查找以获取readmore标记
$（this.prev（）.find（'a.read-more'）.removeClass（'active'）；
});
$（'.extra text'）.on（'show.bs.collapse'，函数（e）{
$（this.prev（）.find（'a.read-more'）.addClass（'active'）；
});
a.read-more:：after{
字体系列：“字体真棒5免费”；
内容：“\f078”；
显示：内联块；
过渡：均为0.5s；
字号：900；
}
a、 阅读更多。活动：之后{
-webkit变换：旋转（180度）；
-moz变换：旋转（180度）；
变换：旋转（180度）；
}


阅读更多

隐藏文本

阅读更多

隐藏文本

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

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);
}