Jquery 手风琴部分在我关闭时弹回打开

Question

我有三个手风琴部分，我希望在我第一次访问该页面时打开第一个（其他两个关闭）。我给了所有三个（即下面的 'accordionSectionContent'）单独的 ID（在它们共享的 class 'accordionSectionContent' 之上），对于第一个我说：

#accordion1 {
display:block;
}

一切都很好，除非我在开始时单击它的标题（即使它已经打开），它会关闭然后再次弹开。如果我再次按下它，它不会再次弹起而是关闭。问题一定出在以下代码（请修改和教育）：

相关jQuery：

$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordionSectionTitle').removeClass('active');
$('.accordion .accordionSectionContent').slideUp(300).removeClass('open');
}

$('.accordionSectionTitle').click(function(e) {
    var currentAttrValue = $(this).attr('href');

    if($(e.target).is('.active')) {
    close_accordion_section();
    }else {
    close_accordion_section();

    $(this).addClass('active');
    $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
    }

    e.preventDefault();
    });
});

HTML如下：

<div class="accordion">

<div class="accordionSection"><a class="accordionSectionTitle" href="#accordion1" id="accordionSectionTitle1">Info</a>
<div id="accordion1" class="accordionSectionContent">
<p>Helpful info</p>
</div>
</div>

<div class="accordionSection"><a class="accordionSectionTitle" href="#accordion2" id="accordionSectionTitle2">How long will it take?</a>
<div id="accordion2" class="accordionSectionContent">
<p>An estimate of time</p>
</div>
</div>

<div class="accordionSection"><a class="accordionSectionTitle" href="#accordion3" id="accordionSectionTitle3">How do I?</a>
<div id="accordion3" class="accordionSectionContent">
<p>.</p>
</div>
</div>

</div>

Answer 1

我创建了一个 fiddle。

https://jsfiddle.net/u6y7ezz4/1/

你可能会不高兴，但你错过了一个 space :)

在你的函数中 close_accordion_section

function close_accordion_section() {
     $('.accordion .accordionSectionTitle').removeClass('active');
     $('.accordion.accordionSectionContent').slideUp(300).removeClass('open');
}

您在 .accordion 和 .accordionSectionContent

之间的第二行缺少 space

修复方法是：

function close_accordion_section() {
     $('.accordion .accordionSectionTitle').removeClass('active');
     $('.accordion .accordionSectionContent').slideUp(300).removeClass('open');
}

Answer 2

看看这是否是您想要完成的。

var headers = $('.accordion-section a');
var contentAreas = $('.accordion-section-content').hide();
var firstContentAreas = $('.accordion-section-content').hide().first().show();

headers.click(function(e) {

  e.preventDefault();
  var panel = $(this).parent('div').next('div');
  var isOpen = panel.is(':visible');

  contentAreas.slideUp();
  panel[isOpen ? 'slideUp' : 'slideDown']()
    .trigger(isOpen ? 'hide' : 'show');

  $('.accordion-section a').not(this).removeClass('accordion-section-title');
  $(this).toggleClass('accordion-section-title');


  return false;
});

.accordion {
  overflow: hidden;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  background: #f5f5f5;
  border: 1px solid #444;
  border-radius: 0px;
  font-family: "Verdana";
}
.accordion-section {
  clear: both;
  text-align: left;
  border: 2px solid #444;
  min-width: 200px;
  min-height: 40px;
  color: #fff;
  background: #444;
  display: block;
  font-weight: 400;
  padding: 10px 10px;
}
.accordion-section a,
.accordion-section a:active,
.accordion-section a:visited {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 10px;
}
.accordion-section-content {
  padding: 5px 15px;
  line-height: 1.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="accordion">
  <div class="accordion-section"> <a href="#accordion-1" class="accordion-section-title">Accordion Section #1</a>

  </div>
  <div id="accordion-1" class="accordion-section-content">
    <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras
      tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
  </div>
  <!--end .accordion-section-content-->
  <!--end .accordion-section-->
  <div class="accordion-section"> <a href="#accordion-2" class="accordion-section-title">Accordion Section #2</a>

  </div>
  <div id="accordion-2" class="accordion-section-content">
    <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras
      tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
  </div>
  <!--end .accordion-section-content-->
  <!--end .accordion-section-->
  <div class="accordion-section"> <a href="#accordion-3" class="accordion-section-title">Accordion Section #3</a>

  </div>
  <div id="accordion-3" class="accordion-section-content">
    <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridicu.</p>
    <!--accordion-section-content-->
    <!--end .accordion-section-->
  </div>
  <!--end .accordion-->

Jquery 手风琴部分在我关闭时弹回打开

Jquery accordion section bounces back open when I close it

css

accordion