为JQuery手风琴添加图标

Question

我已经构建了以下超级简单的JQuery手风琴：

＆＃13;

＆＃13;

jQuery(document).ready(function($) {
    
 var allPanels = $('.accordion > div').hide();
    
  $('.accordion > h2 > a').click(function() {
    allPanels.slideUp().addClass("closed");

    if($(this).parent().next().css('display')=='none') {
        $(this).parent().next().slideDown().removeClass("closed");
    }

    return false;
  });

}); // End JQuery

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="accordion">
  <h2><a href="">Click me</a></h2>
  <div class="content">
    <p>Here's the content</p>					
  </div><!-- .content -->
  <h2><a href="">Click me</a></h2>
  <div class="content">
    <p>Here's the content</p>					
  </div><!-- .content -->
  <h2><a href="">Click me</a></h2>
  <div class="content">
    <p>Here's the content</p>					
  </div><!-- .content -->
</div><!-- .accordion -->

＆＃13;

＆＃13;

＆＃13;

我有一个类被添加到.content div，但是希望将其添加到<h2>，以便我可以添加打开和关闭符号。这可能吗？

Answer 1

您可以将类添加/移除到已点击元素的父级，如

＆＃13;

＆＃13;

jQuery(document).ready(function($) {

  var allPanels = $('.accordion > div');
  var allH2 = $('.accordion > h2');

  $('.accordion > h2 > a').click(function() {
    var $h2 = $(this).parent();
    allH2.not($h2).removeClass('active');
    allPanels.stop(true).slideUp().find('.accordion-heading').addClass("closed");

    if ($(this).parent().next().css('display') == 'none') {
      $(this).parent().next().slideDown().find('.accordion-heading').removeClass("closed");
    }
    $h2.toggleClass('active');

    return false;
  });

}); // End JQuery

＆＃13;

.accordion .content {
  display: none;
}
.accordion h2.active:before {
  content: '-'
}
.accordion h2:before {
  content: '+'
}

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="accordion">
  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content" style="display: none;">
    <p>Here's the content</p>
  </div>
  <!-- .content -->

  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content" style="display: none;">
    <p>Here's the content</p>
  </div>
  <!-- .content -->

  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content" style="display: none;">
    <p>Here's the content</p>
  </div>
  <!-- .content -->

</div>
<!-- .accordion -->

＆＃13;

＆＃13;

＆＃13;

更简化的版本可以是css 3

＆＃13;

＆＃13;

jQuery(document).ready(function($) {
  $('.accordion > h2').click(function(e) {
    e.preventDefault();

    var $this = $(this);

    $this.toggleClass('active');
    $this.next().stop()[$this.hasClass('active') ? 'slideDown' : 'slideUp']();
    $this.siblings('.accordion-heading').removeClass('active').next().stop().slideUp();
  });

}); // End JQuery

＆＃13;

.accordion > .content {
  display: none;
}
.accordion > h2.active:before {
  content: '-'
}
.accordion > h2:before {
  content: '+'
}

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="accordion">
  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content" style="display: none;">
    <p>Here's the content</p>
  </div>
  <!-- .content -->

  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content" style="display: none;">
    <p>Here's the content</p>
  </div>
  <!-- .content -->

  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content" style="display: none;">
    <p>Here's the content</p>
  </div>
  <!-- .content -->

</div>
<!-- .accordion -->

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用jQuery的.find()函数来查找该类的元素。您也可以找到标签，但使用自定义类查找标签是一种更好的做法。

＆＃13;

＆＃13;

jQuery(document).ready(function($) {
    
 var allPanels = $('.accordion > div').hide();
    
  $('.accordion > h2 > a').click(function() {
    allPanels.slideUp().find('.accordion-heading').addClass("closed");

    if($(this).parent().next().css('display')=='none') {
        $(this).parent().next().slideDown().find('.accordion-heading').removeClass("closed");
    }

    return false;
  });

}); // End JQuery

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="accordion">
  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content">
    <p>Here's the content</p>					
  </div><!-- .content -->
  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content">
    <p>Here's the content</p>					
  </div><!-- .content -->
  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content">
    <p>Here's the content</p>					
  </div><!-- .content -->
</div><!-- .accordion -->

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以这样做：

jQuery(document).ready(function ($) {
    var allPanels = $('.accordion > div').hide();

    $('.accordion > h2 > a').click(function () {
        allPanels.css('display', 'none');
        allPanels.removeClass("closed");
        $(this).parent().addClass("closed");
        $(this).parent().next().slideDown();
        return false;
    });
}); // End JQuery