Question

我有这种手风琴几乎正常工作，如果你单独点击每个项目它会做它应该做的事情。如果你在一个项目处于活动状态时单击其他项目，但是当错误开始出现，因为我不确定如何继续切换兄弟姐妹的状态时，它们会正确向上滑动，但我也希望它们能够更改回来它的原始颜色，原始状态的.fa图标和重新出现的边框底部。我在Codepen中有一个例子：

https://codepen.io/SergiOca/pen/dWexdW

 <body>

<div class="accordion-wrap">
              <div class="accordion-item">
                <p class="accordion-header"> Bordado <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
              </div>
              <div class="accordion-text">
                <p> Básica y de fantasía con apliques, metálicos, flocado, purpurina, lentejuelas, bolas, brillantes… alta frecuencia, sublimación, tránsfer, láser, hueco grabado, serigrafía digital, vinilo textil. </p>
              </div>
           </div>


           <div class="accordion-wrap">
              <div class="accordion-item">
                <p class="accordion-header"> Bordado <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
              </div>
              <div class="accordion-text">
                <p> Básica y de fantasía con apliques, metálicos, flocado, purpurina, lentejuelas, bolas, brillantes… alta frecuencia, sublimación, tránsfer, láser, hueco grabado, serigrafía digital, vinilo textil. </p>
              </div>
           </div>


            <div class="accordion-wrap">
              <div class="accordion-item">
                <p class="accordion-header"> Bordado <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
              </div>
              <div class="accordion-text">
                <p> Básica y de fantasía con apliques, metálicos, flocado, purpurina, lentejuelas, bolas, brillantes… alta frecuencia, sublimación, tránsfer, láser, hueco grabado, serigrafía digital, vinilo textil. </p>
              </div>
           </div>


</body>



body{
  width: 50%;
  margin: 0 auto;
  padding-top: 5%;
}

.accordion-item{
  width: 100%;
  margin: 0 auto;
  cursor: pointer;
  border-bottom: 1px solid #ddba4d;
  margin-top: 30px;
}

.accordion-wrap{
    border-bottom: 1px solid #ddba4d;
}

.accordion-header{
  transition: ease-in-out 100ms;
}

.accordion-text{
  width: 100%;
  border-bottom: 1px solid #ddba4d;
  display: none;
  padding-top: 5px;
  padding-bottom: 20px;
 }

 .fa{
    transition: ease-in-out 300ms;
 }

 .rotate-fa{
    transform: rotate(180deg);
 }


 .accordion-header .fa{
    float: right;
    line-height: 35px;
 }

 .accordion-gold{
    color: #ddba4d;
 }

 .accordion-no-bar{
    border-bottom: 0;
 }


    $(".accordion-wrap").on("click", function(){   
      $(this).children().eq(1).slideToggle(300);  
      $(this).find(".accordion-header").toggleClass("accordion-gold");
      $(this).find(".fa").toggleClass("rotate-fa");

      $(".accordion-wrap .accordion-text").not($(this).children().eq(1)).slideUp(300); 
  });

Answer 1

基于您首先创建的codepen，我添加了一个删除所有其他accordion-gold类的方法。

所以我在现有代码中添加了一行javascript代码：

$(this).siblings().find(".accordion-header").removeClass("accordion-gold");

如果你将它应用于你的代码，它应该看起来像这样：

/* acordion */
$(".accordion-wrap").on("click", function(){   
    $(this).children().eq(1).slideToggle(300);  
    $(this).children().eq(0).toggleClass("accordion-no-bar");
    $(this).siblings().find(".accordion-header").removeClass("accordion-gold");
    $(this).find(".accordion-header").toggleClass("accordion-gold");
    $(this).find(".fa").toggleClass("rotate-fa");

    $(".accordion-wrap .accordion-text").not($(this).children().eq(1)).slideUp(300);
});

希望这有帮助！

Answer 2

你也可以尝试一下。

＆＃13;

/* acordion */
$(".accordion-wrap").on("click", function() {
  $(this).children().eq(1).slideToggle(300);
  $(this).children().eq(0).toggleClass("accordion-no-bar");
  $(this).find(".accordion-header").toggleClass("accordion-gold");
  $(this).find(".fa").toggleClass("rotate-fa");
  $(".accordion-wrap .accordion-text").not($(this).children().eq(1)).slideUp(300);
  $(".accordion-wrap .accordion-item").not($(this).children().eq(0)).removeClass("accordion-no-bar");
  $(this).siblings().find(".accordion-header").removeClass("accordion-gold");
});

＆＃13;

body {
  width: 50%;
  margin: 0 auto;
  padding-top: 5%;
}

.accordion-item {
  width: 100%;
  margin: 0 auto;
  cursor: pointer;
  border-bottom: 1px solid #ddba4d;
  margin-top: 30px;
}

.accordion-header {
  transition: ease-in-out 100ms;
}

.accordion-text {
  width: 100%;
  border-bottom: 1px solid #ddba4d;
  display: none;
  padding-top: 5px;
  padding-bottom: 20px;
}

.fa {
  transition: ease-in-out 300ms;
}

.rotate-fa {
  transform: rotate(180deg);
}

.accordion-header .fa {
  float: right;
  line-height: 35px;
}

.accordion-gold {
  color: #ddba4d;
}

.accordion-no-bar {
  border-bottom: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="accordion-wrap">
    <div class="accordion-item">
      <p class="accordion-header"> Bordado <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
    </div>
    <div class="accordion-text">
      <p> Básica y de fantasía con apliques, metálicos, flocado, purpurina, lentejuelas, bolas, brillantes… alta frecuencia, sublimación, tránsfer, láser, hueco grabado, serigrafía digital, vinilo textil. </p>
    </div>
  </div>
  <div class="accordion-wrap">
    <div class="accordion-item">
      <p class="accordion-header"> Bordado <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
    </div>
    <div class="accordion-text">
      <p> Básica y de fantasía con apliques, metálicos, flocado, purpurina, lentejuelas, bolas, brillantes… alta frecuencia, sublimación, tránsfer, láser, hueco grabado, serigrafía digital, vinilo textil. </p>
    </div>
  </div>


  <div class="accordion-wrap">
    <div class="accordion-item">
      <p class="accordion-header"> Bordado <i class="fa fa-angle-down" aria-hidden="true"></i> </p>
    </div>
    <div class="accordion-text">
      <p> Básica y de fantasía con apliques, metálicos, flocado, purpurina, lentejuelas, bolas, brillantes… alta frecuencia, sublimación, tránsfer, láser, hueco grabado, serigrafía digital, vinilo textil. </p>
    </div>
  </div>
</body>

＆＃13;

Accordion样式列表可以正确切换

2 个答案: