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>