jQuery Accordion 功能面板在不应该打开时打开

Posted 2023-03-24

【中文标题】jQuery Accordion 功能面板在不应该打开时打开

【英文标题】：jQuery Accordion Functionality panel opens when it shouldn't be opening

【发布时间】：2017-03-01 21:30:47

【问题描述】：

我从一个站点 (inspirationalpixels) 中获取了一个很棒的可折叠手风琴代码。它工作得很好，除了问题是每当我点击“WEIRD PART”这个词时，面板就会再次打开，这是不应该的。当我单击“Chapter 1”一词时，手风琴工作正常。这个词上有一个跨度类，也许就是这样？你会明白我的意思

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();
    );
);

【问题讨论】：

向问题添加代码

【参考方案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: '\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;

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