供電的非常簡單的手風琴與jQuery

Question

我有以下標記：

<ul class="questions-answers"> 
    <li> 
     <h3><a href="#">Question 1</a></h3> 
     <div>Odio natoque est sagittis, elementum turpis porttitor velit amet? Aenean? Sociis tincidunt magnis natoque ultrices, nunc ultrices, elementum? Augue velit integer, elementum adipiscing. Integer mauris ultrices massa odio.</div> 
    </li> 
    <li> 
     <h3><a href="#">Question 2</a></h3> 
     <div>Tincidunt, tincidunt magna. Ultricies platea. Vel augue tempor sit scelerisque pulvinar! Nisi, auctor sed, lundium adipiscing aliquet, et magna? Arcu nec vut ultricies elementum odio sociis mauris sit?</div> 
    <li> 
    <!-- at least 7 more --> 
</ul> 

我需要使用jQuery是要實現什麼，當點擊其中一個，在同裏的股利揭示和所有其他分區被隱藏。點擊不同的a時，會顯示該li中的div，並再次隱藏所有其他div。

希望有道理！

編輯添加jQuery代碼。

對不起，我應該已經添加了我的jQuery：

$('.questions-answers li div').hide(); 
$(".questions-answers h3 a").click(function() { 
    $('.questions-answers li div').hide(); 
    $(this).next("div").show(); 
}); 

Answer 1

的問題是，因爲你已經綁定單擊處理到錨元素，下一個元素是不是DIV，它是父H3元素的下一個兄弟

var $divs = $('.questions-answers li > div').hide(); 
$(".questions-answers li > h3 a").click(function() { 

    var $div = $(this).parent().next("div").show(); 
    $divs.not($div).hide(); 
}); 

或綁定的處理程序到H3

var $divs = $('.questions-answers li > div').hide(); 
$(".questions-answers li > h3").click(function() { 
    var $div = $(this).next("div").show(); 
    $divs.not($div).hide(); 
}); 

Answer 2

$('a').click(function(){ 
$('ul').find('div').hide(); 
$(this).parent('li').find('div').show(); 
}); 

我沒有測試過，但將有希望的工作。