jQuery 手风琴，单击已打开的手风琴项目只需切换它

Question

我有一个半工作 示例 你可以看看。

这似乎按照大多数人的意愿工作，尽管它分享了我在许多其他手风琴中看到的一个错误，即如果您单击已打开的标题链接，它将关闭，然后再次打开。

有什么优雅的解决方案吗？

这是 jQuery

 <script language="javascript">
      $(document).ready(function() {

        // Simple Accordion Style Menu Function
        $('h2.question').click(function() {
            $('div.answer').slideUp('normal');  
            $(this).next().slideDown('normal');
        });

        // Closes All Divs on Page Load
        $("div.answer").hide();

        // Opens the first div
        var Current = $('.question:first');
           Current.next().show();

      });
 </script>

这是我想要使用的基本标记：

 <div class="accordion">
      <h2 class="question"><a href="#">Header 1</a></h2>
      <div class="answer">
           <p>some body content 1</p>
           <p>some body content 2</p>
           <p>some body content 3</p>
      </div>

      <h2 class="question"><a href="#">Header 2</a></h2>
      <div class="answer">
           <p>some body content a</p>
           <p>some body content b</p>
           <p>some body content c</p>
      </div>

      <h2 class="question"><a href="#">Header 3</a></h2>
      <div class="answer">
           <p>some body content x</p>
           <p>some body content y</p>
           <p>some body content z</p>
      </div>
 </div>

Answer 1

您可以尝试在 h2 上添加一个类以记录其活动状态，然后在每次单击 h2 时检查该类？如果它上面有活动类，那么什么都不做，因为它已经打开了。同样在页面加载时，它为第一个 h2.question 提供了一个活动类。

<script language="javascript">
      $(function() {
            // Simple Accordian Style Menu Function
            $('h2.question').click(function() {
              if(!$(this).hasClass('active')) {
                $('div.answer:visible').slideUp('normal').prev('h2.question').removeClass('active');
                $(this).addClass('active').next().slideDown('normal');
              }
            });

            // Closes All Divs on Page Load
            $("div.answer").hide();

            // Opens the first div
            var Current = $('h2.question:first');
               Current.addClass('active').next().show();

          });
     </script>