jquery - Accordion 展开折叠图标问题

Question

我正在构建一个 Accordion ，其中包含多个子项并在单击时显示一个打开/关闭图标。

我遇到的问题是图标。一次展开和折叠一个元素没问题，但是当您打开多个元素时，图标开始表现得很奇怪，并且在它们应该是加号的时候显示减号。

我已经尝试过 each 和 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>