Accordion expand collapseアイコンの問題

Question

私はいくつかの子供を含むアコーディオンを作成しており、クリック時に開閉アイコンを表示します。

私が抱いている問題は、アイコンの問題です。一度に1つずつ展開したり折りたたんだりするときは問題ありませんが、複数のアイテムを開くと、アイコンが奇妙な動作を開始し、プラスでなければならないときにマイナスを表示します。

私はそれぞれのif文とif文を試しましたが、今はまだ運がありません。

また、私はただ、冒頭でclick event以内に以下の行を追加します。私のCodePen

$(document).ready(function(){ 
 
    $('.pub-accordion-content').hide(); 
 
    
 
    $('#pub-accordion').find('.pub-accordion-toggle').click(function(){ 
 

 
     var $this = $(this); 
 

 
     //Toggle icon 
 
     $this.toggleClass("open"); 
 

 
     //Expand or collapse this panel 
 
     $this.next().slideToggle('fast') 
 
     
 
     //Hide the other panels 
 
     $(".pub-accordion-content").not($this.next()).slideUp('fast'); 
 
    }); 
 
});

#pub-accordion { 
 
    padding: 24px;  
 
    } 
 
    #pub-accordion h4:first-child { 
 
    border-top: 1px solid #ccc; 
 
    } 
 
    #pub-accordion h4 {  
 
    border-bottom: 1px solid #ccc; 
 
    color: #00539f; 
 
    font-size: 1.6em; 
 
    margin: 0; 
 
    padding: 16px 0 16px 33px; 
 
    cursor: pointer; 
 
    } 
 
    #pub-accordion .closed { 
 
    background: url(http://www.dcholloway.co.uk/codepen/primary-collapse-icon.png) no-repeat 0 13px; 
 
    } 
 
    #pub-accordion .open { 
 
    background: url(http://www.dcholloway.co.uk/codepen/primary-expand-icon.png) no-repeat 0 13px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Size Guide - - - - - - - - - - - - - - - - --> 
 
<div class="row row__im impage--no-margin"> 
 
    <div class="page"> 
 
     <div class="row"> 
 
     <div class="s-100 m1-100 m2-100 l-100"> 
 

 
      <div id="pub-accordion"> 
 
       <h4 class="pub-accordion-toggle closed">Boys size guide</h4> 
 
       <div class="pub-accordion-content default"> 
 
        <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
 
       </div> 
 
       <h4 class="pub-accordion-toggle closed">Girls size guide</h4> 
 
       <div class="pub-accordion-content"> 
 
        <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
 
       </div> 
 
       <h4 class="pub-accordion-toggle closed">Boys plus fit size guide</h4> 
 
       <div class="pub-accordion-content"> 
 
        <p>Vivamus facilisisnibh scelerisque laoreet.</p> 
 
       </div> 
 
       <h4 class="pub-accordion-toggle closed">Girls plus fit size guide</h4> 
 
       <div class="pub-accordion-content"> 
 
        <p>Vivamus facilisisnibh scelerisque laoreet.</p> 
 
       </div> 
 
      </div> 
 

 

 
     </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

は一つの解決策です。これにより、クラスopenがすべて<h4>に削除され、closeが追加されます。

$(.pub-accordion-toggle)でも動作します。

編集：開いた要素をクリックしたときに問題が発生していることがわかりましたので、修正しました。

$(document).ready(function() { 
 
    $('.pub-accordion-content').hide(); 
 

 
    $('#pub-accordion').find('.pub-accordion-toggle').click(function() { 
 

 
    var $this = $(this); 
 
    var toOpen = $this.hasClass("open"); 
 
    $('h4').removeClass("open").addClass("closed"); 
 

 

 
    //Toggle icon 
 
    if (!toOpen) { 
 
     $this.removeClass("closed").addClass("open"); 
 
    } 
 

 
    //Expand or collapse this panel 
 
    $this.next().slideToggle('fast') 
 

 
    //Hide the other panels 
 
    $(".pub-accordion-content").not($this.next()).slideUp('fast'); 
 
    }); 
 
});

#pub-accordion { 
 
    padding: 24px; 
 
} 
 

 
#pub-accordion h4:first-child { 
 
    border-top: 1px solid #ccc; 
 
} 
 

 
#pub-accordion h4 { 
 
    border-bottom: 1px solid #ccc; 
 
    color: #00539f; 
 
    font-size: 1.6em; 
 
    margin: 0; 
 
    padding: 16px 0 16px 33px; 
 
    cursor: pointer; 
 
} 
 

 
#pub-accordion .closed { 
 
    background: url(http://www.dcholloway.co.uk/codepen/primary-collapse-icon.png) no-repeat 0 13px; 
 
} 
 

 
#pub-accordion .open { 
 
    background: url(http://www.dcholloway.co.uk/codepen/primary-expand-icon.png) no-repeat 0 13px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Size Guide - - - - - - - - - - - - - - - - --> 
 
<div class="row row__im impage--no-margin"> 
 
    <div class="page"> 
 
    <div class="row"> 
 
     <div class="s-100 m1-100 m2-100 l-100"> 
 

 
     <div id="pub-accordion"> 
 
      <h4 class="pub-accordion-toggle closed">Boys size guide</h4> 
 
      <div class="pub-accordion-content default"> 
 
      <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
 
      </div> 
 
      <h4 class="pub-accordion-toggle closed">Girls size guide</h4> 
 
      <div class="pub-accordion-content"> 
 
      <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
 
      </div> 
 
      <h4 class="pub-accordion-toggle closed">Boys plus fit size guide</h4> 
 
      <div class="pub-accordion-content"> 
 
      <p>Vivamus facilisisnibh scelerisque laoreet.</p> 
 
      </div> 
 
      <h4 class="pub-accordion-toggle closed">Girls plus fit size guide</h4> 
 
      <div class="pub-accordion-content"> 
 
      <p>Vivamus facilisisnibh scelerisque laoreet.</p> 
 
      </div> 
 
     </div> 
 

 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

へのリンクを提供してきました。

$(".pub-accordion-toggle").removeClass('open'); 

だから、あなただけ.pub-accordion-toggle要素から任意のopenクラスを削除

$('#pub-accordion').find('.pub-accordion-toggle').click(function(){ 
    $(".pub-accordion-toggle").removeClass('open');//this here 
    var $this = $(this); 

    //Toggle icon 
    $this.toggleClass("open"); 

    //Expand or collapse this panel 
    $this.next().slideToggle('fast') 

    //Hide the other panels 
    $(".pub-accordion-content").not($this.next()).slideUp('fast'); 
}); 

、次のようになります。それはそれがするものです。クリックイベントに$('h4').removeClass("open").addClass("closed");を追加

Updated Pen

Answer 3

あなたは、パネルを閉じたが、アイコンに代わるものではありませんでした。私はjQueryコードの最後に関数を調整しました。あなたの助けジェラルド＆パオロため

$('.pub-accordion-content').hide(); 
 

 
$('#pub-accordion').find('.pub-accordion-toggle').click(function() { 
 

 
    var $this = $(this); 
 

 
    // Replace the icon 
 
    $(".pub-accordion-toggle").removeClass("open"); 
 

 
    //Hide the other panels 
 
    $(".pub-accordion-content").not($this.next()).slideUp('fast'); 
 

 
    //Toggle icon 
 
    $this.toggleClass("open"); 
 

 
    //Expand or collapse this panel 
 
    $this.next().slideToggle('fast') 
 

 
});

#pub-accordion { 
 
    padding: 24px; 
 
} 
 

 
#pub-accordion h4:first-child { 
 
    border-top: 1px solid #ccc; 
 
} 
 

 
#pub-accordion h4 { 
 
    border-bottom: 1px solid #ccc; 
 
    color: #00539f; 
 
    font-size: 1.6em; 
 
    margin: 0; 
 
    padding: 16px 0 16px 33px; 
 
    cursor: pointer; 
 
} 
 

 
#pub-accordion .closed { 
 
    background: url(http://www.dcholloway.co.uk/codepen/primary-collapse-icon.png) no-repeat 0 13px; 
 
} 
 

 
#pub-accordion .open { 
 
    background: url(http://www.dcholloway.co.uk/codepen/primary-expand-icon.png) no-repeat 0 13px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row row__im impage--no-margin"> 
 
    <div class="page"> 
 
    <div class="row"> 
 
     <div class="s-100 m1-100 m2-100 l-100"> 
 

 
     <div id="pub-accordion"> 
 
      <h4 class="pub-accordion-toggle closed">Boys size guide</h4> 
 
      <div class="pub-accordion-content default"> 
 
      <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
 
      </div> 
 
      <h4 class="pub-accordion-toggle closed">Girls size guide</h4> 
 
      <div class="pub-accordion-content"> 
 
      <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
 
      </div> 
 
      <h4 class="pub-accordion-toggle closed">Boys plus fit size guide</h4> 
 
      <div class="pub-accordion-content"> 
 
      <p>Vivamus facilisisnibh scelerisque laoreet.</p> 
 
      </div> 
 
      <h4 class="pub-accordion-toggle closed">Girls plus fit size guide</h4> 
 
      <div class="pub-accordion-content"> 
 
      <p>Vivamus facilisisnibh scelerisque laoreet.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>