兄弟姐妹的問題 - 關閉所有打開的面板時1打開

Question

，如果我有這個網站：

<div class="main cat_info"> 
<h2>Question 1?</h2> 
    <div class="answer"> 
    <p>bla bla bla</p> 
    </div> 
    <h2>question 2</h2> 
    <div class="answer"> 
    <p>bla bla bla</p> 
    </div> 
    <h2>Question 3?</h2> 
    <div class="answer"> 
    <p>bla bla bla</p> 
    </div> 
</div> 

，我打開一個問題，如果一個問題被打開它關閉（這是我想要的）。但是當我在div中包裝h2和.answer時，它不起作用。像：

<div class="main cat_info"> 
    <div class="holder"> 
<h2>Question 1?</h2> 
    <div class="answer"> 
    <p>bla bla bla</p> 
    </div> 
</div> 
<div class="holder"> 
    <h2>question 2</h2> 
    <div class="answer"> 
    <p>bla bla bla</p> 
    </div> 
</div> 
    <div class="holder"> 
    <h2>Question 3?</h2> 
    <div class="answer"> 
    <p>bla bla bla</p> 
    </div> 
</div> 
</div> 

這是jQuery的：

$(document).ready(function() { 
$('.answer').hide(); 
$('.cat_info h2').on('click', function() { 
    var state = $(this).next('.answer').is('.open'); 
    if (state) { 
     $(this).removeClass('active').next('.answer').removeClass('open').fadeOut(); 
    }else{ 
     $(this).addClass('active').next('.answer').addClass('open').slideDown() 
       .siblings('.answer').removeClass('open').slideUp().end() 
       .siblings('h2').not(this).removeClass('active'); 
    } 
    }); 
}); 

我想這是兄弟姐妹的問題。幫幫我？

Answer 1

隨着該標記的話，大概是這樣的：

$(document).ready(function() { 
    $('.answer').hide(); 
    $('.cat_info h2').on('click', function() { 
     var state = $(this).is('.active'); 
     if (state) { 
      $(this).removeClass('active').next('.answer').fadeOut(); 
     } else { 
      $(this).addClass('active').next('.answer').slideDown() 
        .closest('.holder').siblings('.holder').find('.answer').slideUp().end() 
        .find('h2').not(this).removeClass('active'); 
     } 
    }); 
});​ 

FIDDLE