手風琴展開摺疊圖標問題

Question

我正在建造一個手風琴，其中包括幾個孩子，並在點擊時顯示打開/關閉圖標。

我遇到的問題是圖標。一次展開和摺疊很好，但是當您打開多個項目時，圖標開始出現奇怪的動作，並在應該加上時顯示錯誤。

我已經試驗過每個if else語句，但現在運氣還不錯。

我還提供了一個鏈接到我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

添加$('h4').removeClass("open").addClass("closed");點擊事件是一個解決方案。這將類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

伊始內click event只需添加下面一行。

$(".pub-accordion-toggle").removeClass('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'); 
}); 

您剛剛從.pub-accordion-toggle元素刪除任何open類。這就是它的作用。

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>