html 折叠按钮的类在项是否折叠时更改

ffscu2ro  于 2022-11-27  发布在  其他
关注(0)|答案(1)|浏览(167)

很抱歉,我刚刚开始开发这个代码,我根本不知道哪里是我想要的触发器。
所以我在寻找:我已经实现了,当我点击一个按钮,连接到它的区域显示和其他2个折叠。我不知道的是,我如何可以改变按钮的类(从fa-Angular -右到fa-Angular -下),当我的区域显示,并回到默认的折叠时...
下面是我HTML:

<section id="mes-creations" class="mes-creations text-center">
 <div class="mes-creations">
  <div class="container">
   <div class="row">
    <div class="col-lg-12">
     <h2 id="titre-section">section title</h2>
     <p>section description</p>
    </div>
   </div>
                <!--bouttons-->
   <div class="row">
    <p>
    <div class="col-sm-4 col-md-4 col-lg-4">
     <a class="btn btn-primary stylebtn collapsed" id="bouton-1" data-toggle="collapse" data-parent="#accordeon" href="#collapseGallery1" aria-expanded="false" aria-controls="collapseGallery1">
      <span class="fa fa-angle-right animated"> bouttontitle1</span>
     </a>
    </div>
    </p>
    <p>
    <div class="col-sm-4 col-md-4 col-lg-4">
     <a class="btn btn-primary stylebtn collapsed" id="bouton-2" data-toggle="collapse" data-parent="#accordeon" href="#collapseGallery2" aria-expanded="false" aria-controls="collapseGallery2">
      <span class="fa fa-angle-right animated"> boutontitle2</span>
     </a>
    </div>
    </p>
    <p>
    <div class="col-sm-4 col-md-4 col-lg-4">
     <a class="btn btn-primary stylebtn collapsed" id="bouton-3" data-toggle="collapse" data-parent="#accordeon" href="#collapseGallery3" aria-expanded="false" aria-controls="collapseGallery3">
      <span class="fa fa-angle-right animated"> boutontitle3</span>
     </a>
    </div>
    </p>                    
    </div>
    <!--end button-->
    <!--gallery-->
    <p>
    <div class="row" id="accordeon">
      <div class="gallery-custom row collapse" id="collapseGallery1">
       <div class="col-xs-6 col-sm-4 col-md-3"><img class="img-gallery-style" src="img/Banniere/11-fleurs.png" alt="Banniere1"></div>
       <div class="col-xs-6 col-sm-4 col-md-3"><img class="img-gallery-style" src="img/Banniere/Annees-80.png" alt="Banniere2"></div>
       <div class="col-xs-6 col-sm-4 col-md-3"><img class="img-gallery-style" src="img/Banniere/Banniere-robo.gif" alt="Banniere3"></div>
       <div class="col-xs-6 col-sm-4 col-md-3"><img class="img-gallery-style" src="img/Banniere/banniere-site-2012.png" alt="Banniere4"></div>
       <div class="col-xs-6 col-sm-4 col-md-3"><img class="img-gallery-style" src="img/Banniere/Collection-western.png" alt="Banniere5"></div>
       <div class="col-xs-6 col-sm-4 col-md-3"><img class="img-gallery-style" src="img/Banniere/Beyblade-Film-V1G.png" alt="Banniere6"></div>
      </div>
      <div class="gallery-custom row collapse" id="collapseGallery2">
       <div class="col-xs-4 col-sm-3 col-md-3"><img class="img-gallery-style" src="img/CP/Camelot-CP.png" alt="CP1"></div>
       <div class="col-xs-4 col-sm-3 col-md-3"><img class="img-gallery-style" src="img/CP/CP-Groupe-delite-Final.png" alt="CP2"></div>
       <div class="col-xs-4 col-sm-3 col-md-3"><img class="img-gallery-style" src="img/CP/CP-guerre-des-empires.png" alt="CP3"></div>
       <div class="col-xs-4 col-sm-3 col-md-3"><img class="img-gallery-style" src="img/CP/CP-GUERRIERE_ZYLO.png" alt="CP4"></div>
       <div class="col-xs-4 col-sm-3 col-md-3"><img class="img-gallery-style" src="img/CP/CP-MAntera-copie.png" alt="CP5"></div>
       <div class="col-xs-4 col-sm-3 col-md-3"><img class="img-gallery-style" src="img/CP/CP-OFF-WHITE-LIES_ZYLO2.png" alt="CP6"></div>
      </div>
      <div class="gallery-custom row collapse" id="collapseGallery3">
       <div class="col-xs-6 col-sm-6 col-md-6"><img class="img-gallery-style" src="img/Print/BLACKS-GAME-ANNEES-LASER.png" alt="Print1"></div>
       <div class="col-xs-6 col-sm-6 col-md-6"><img class="img-gallery-style" src="img/Print/BLACKS-GAME-MADMOVIES.png" alt="Print2"></div>
       <div class="col-xs-6 col-sm-6 col-md-6"><img class="img-gallery-style" src="img/Print/print-2013-final.png" alt="Print3"></div>
       <div class="col-xs-6 col-sm-6 col-md-6"><img class="img-gallery-style" src="img/Print/Print-Line-Up-Final.png" alt="Print4"></div>
      </div>
     </div>
     </p>
    </div>
   </div>
  </section>

和我js:

$('#accordeon').on('show.bs.collapse', function () {
    $('#accordeon .in').collapse('hide');
});

j2qf4p5b

j2qf4p5b1#

这里有一个有点像黑客的方法,如果你使用更接近Bootstrap建议的标记结构,那会更简单。

$('.stylebtn').click(function() {
    $(this).find('.fa').toggleClass('fa-angle-down fa-angle-right')
    .closest('div').siblings().find('.fa')
    .removeClass('fa-angle-down').addClass('fa-angle-right');
});

相关问题