jQuery 可折叠面板在不应该打开时打开

Question

我从一个网站(inspirationalpixels)上抓取了一个很棒的折叠手风琴代码。它工作得很好，除了问题是每当我点击"奇怪的部分"这个词，面板再次打开，它不应该是。当我点击"Chapter 1"这个词时，手风琴可以正常工作。单词后面有一个span类，可能是这样吧?你会明白我的意思

HTML代码:

    <h2><a class="bb-sc-title" href="#chapter01">Chapter 1 <span>WEIRD PART</span></a>  </h2>
    <div id="chapter01" class="bb-story-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-->
        </div><!--/bb-sc-chapter01-->
        <div class="bb-sc-chapter02">
            <h2><a class="bb-sc-title" href="#chapter02">Chapter 2  <span>WEIRD PART</span></a></h2>
            <div id="chapter02" class="bb-story-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-->
        </div><!--/bb-sc-chapter02-->
        <div class="bb-sc-chapter03">
            <h2><a class="bb-sc-title" href="#chapter03">Chapter 3  <span>WEIRD PART</span></a></h2>
            <div id="chapter03" class="bb-story-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-->
            <hr>
        </div><!--/bb-sc-chapter03-->
        </div><!--/bb-story-chapters-->

JS代码:

 jQuery(document).ready(function() {
    function close_accordion_section() {
        jQuery('.bb-story-chapters .bb-sc-title').removeClass('active');
        jQuery('.bb-story-chapters .bb-story-content').slideUp(300).removeClass('open');
    }
    jQuery('.bb-sc-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = jQuery(this).attr('href');
        if(jQuery(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();
            // Add active class to section title
            jQuery(this).addClass('active');
            // Open up the hidden content panel
            jQuery('.bb-story-chapters ' + currentAttrValue).slideDown(300).addClass('open'); 
        }
        e.preventDefault();
    });
});

Answer 1

如果你不想使用jQuery Accordion UI，你可以试试:

function accordion(effect) {
  $('div.accordion h2').each(function() {
    if (!$(this).next().is(":hidden") && !$(this).attr('open')) {
      $(this).removeClass('open');
      $(this).next().hide(effect);
    } else if ($(this).attr('open')) {
      $(this).removeAttr('open');
      $(this).addClass('open');
      $(this).next().show(effect);
    }
  });
};
accordion();
$('div.accordion h2').click(function() {
  if ($(this).next().is(":hidden")) {
    accordion("slow");
    $(this).addClass('open');
    $(this).next().show("slow");
  } else {
    accordion("slow");
  }
});

.accordion h2 {
  border-radius: 0;
  color: #295376;
  font-weight: 400;
  text-decoration: none;
}
.accordion h2:before {
  content: '25b60a0';
  font-size: 19px;
  vertical-align: middle;
}
.accordion h2.open:before {
  content: '25bc0a0';
  font-size: 16px;
  vertical-align: baseline;
}
.accordion h2,
.accordion h2:active,
.accordion h2:focus,
.accordion h2:hover {
  border-color: transparent
}
.accordion h2:focus,
.accordion h2:hover {
  color: #0535d2;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
  <h2>Chapter 1</h2>
  <p>Testing Chapter 1</p>
  <h2>Chapter 2</h2>
  <p>Testing Chapter 2</p>
  <h2>Chapter 3</h2>
  <p>Testing Chapter 3</p>
</div>