手风琴风格列表可正确切换

我有这种手风琴几乎正确地工作，如果您单独单击每个项目，它会做它应该做的事情。如果您在一个项目处于活动状态时单击其他项目，但是当错误开始出现时，我不确定如何继续切换兄弟姐妹的状态，但它们确实会正确滑动，但我还想让它们返回原始颜色，.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); 
    });

来源

2017-05-14 Sergi

你错过了的例子 –

对不起，这是里面的HTML代码，然后再返回。 – Sergi

根据您在第一时间创建了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); 
});

希望这有助于！

来源

2017-05-14 11:19:48 magnusnn

这很好，还加入了“$（this）.siblings（）。find（”。accordion-header i“）。removeClass（”rotate-fa“）;”现在实现了我想要的一切。谢谢。 – Sergi

@Sergi这个答案没有解决你没问题的问题吧。再次检查 – Nimish

对不起，我自己解决了禁止问题，并编辑了代码。 – Sergi

你也可以试试这个。

/* 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"); 
 
});

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

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

来源

2017-05-14 11:35:43 Nimish

手风琴风格列表可正确切换

回答

相关问题