Accordion展开折叠图标问题

时间：2017-06-12 09:46:34

标签： jquery css accordion

我正在制作一部包含几个孩子的手风琴，并在点击时显示一个打开/关闭图标。

我遇到的问题是图标。当你一次展开和折叠一个时，它很好，但是当你打开多个项目时，图标开始表现得很奇怪，并且当它们应该加载时显示最小值。

我已经尝试了每个和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>

3 个答案:

答案 0 :(得分：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');
});

您只需从open元素中删除任何.pub-accordion-toggle类。这就是它的作用。

<强> Updated Pen

答案 1 :(得分：1)

向Click事件添加$('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>

答案 2 :(得分：0)

您已关闭面板但未替换图标。我已经调整了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>

相关问题
最新问题