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>