正しく切り替えるアコーディオンスタイルリスト

私はこのアコーディオンをほぼ正しく動作させています。個々のアイテムを個別にクリックすると、それは何をすべきかを行います。あるアイテムがアクティブになっているときに他のアイテムをクリックすると、兄弟の状態を切り替える方法がわからないときにバグが表示され始めたら、正しくスライドアップしますが、それはオリジナルの色です。元の状態の.faアイコンと再表示される境界線の下端です。私はCodepenに例があります： - クラスあなたが最初の場所で作成し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

、私は他のすべての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

正しく切り替えるアコーディオンスタイルリスト

答えて

関連する問題