jQuery手風琴，點擊一個已經打開的手風琴項目只是切換它

Question

我有一個半工作example，你可以看看。

雖然它在許多其他手風琴中共享我看到的錯誤，但如果您單擊已打開的標題鏈接，它會被關閉，然後再次打開。

任何優雅的解決方案？

這裏是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>