如何在bootsrap 4上添加活动和删除现有活动类崩溃

Question

请帮助我，如何在单击“职业菜单”容器之后添加“活动”类，并单击按钮（a）时删除现有的另一个活动类？ 请在下面检查我的代码！。

非常感谢。

<div class="container" id="myCollapse">
 <div class="col-sm-12 col-md-4 order-sm-1 order-md-1">
         <div class="careers-menu-container careers-menu-container__img1">           
            <a data-toggle="collapse" href="#collapseExtension1" role="button" aria-expanded="false" aria-controls="collapseExtension">APPLY NOW <i class="fas fa-caret-right"></i>
            </a>          
         </div>
      </div>
       <div class="collapse" id="collapseExtension1"  data-parent="#myCollapse">
            <p>lorem ipsum</p>
         </div>
      <div class="col-sm-12 col-md-4 order-sm-3 order-md-2">
         <div class="careers-menu-container careers-menu-container__img1">
           <a data-toggle="collapse" href="#collapseExtension2" role="button" aria-expanded="false" aria-controls="collapseExtension">APPLY NOW <i class="fas fa-caret-right"></i>
           </a>
         </div>
      </div>
       <div class="collapse" id="collapseExtension2"  data-parent="#myCollapse">
             <p>lorem ipsum</p>
        </div>
</div>

   

  $(".collapse.show").each(function(){
               // show active class here
           });
           // Toggle plus minus icon on show hide of collapse element
           $(".collapse").on('show.bs.collapse', function(){
                // show active class  and remove another active class
           }).on('hide.bs.collapse', function(){
                // remove  class here and show another active class
           });

Answer 1

您可以使用.careers-menu-container通过.collapse访问.parent()：

$(".collapse").on('show.bs.collapse', function(){
  $(this).parent().addClass('active')
}).on('hide.bs.collapse', function(){
  $(this).parent().removeClass('active')
});