手風琴展開折疊圖標問題

Question

我正在構建一個包含多個孩子的手風琴，並在單擊時顯示一個打開/關閉圖標。

我遇到的問題是圖標。 一次展開和折疊一個就可以了，但是當您打開多個項目時，圖標開始出現奇怪的作用，並在應該加號時顯示減號。

我已經嘗試了每一個if if語句，但是現在為止還很幸運。

我還提供了指向我的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

只需在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類。 這就是它的作用。

更新筆

Answer 2

添加$('h4').removeClass("open").addClass("closed"); 單擊事件是一種解決方案。 這將刪除對所有<h4> open的類，並添加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 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>