Панель jQuery Accordion Functionality открывается, когда она не должна открываться

Question

Я собрал отличный разборный код аккордеона с сайта (inspirationalpixels). Он работает отлично, за исключением проблемы, когда я нажимаю на слово "ЧАСТНАЯ ЧАСТЬ", панель снова открывается, чего не должно быть. Когда я нажимаю слово "Глава 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, вы можете попробовать это:

HTML:

<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>

CSS:

.accordion h2 {
  border-radius: 0;
  color: #295376;
  font-weight: 400;
  text-decoration: none;
}

.accordion h2:before {
  content: '\25b6\00a0';
  font-size: 19px;
  vertical-align: middle;
}

.accordion h2.open:before {
  content: '\25bc\00a0';
  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;
}

Javascript:

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");
  }
});

Вот такая скрипка!,