jQuery的控制单的DIV相同类别（兄弟姐妹？）

Question

我建立了我的网站FAQ模块，我希望能控制，即使他们都具有相同的类页面上的单一元素。我相信这是属于我还不熟悉的兄弟姐妹。

基本上，我希望用户能够点击的问题DIV，然后当他们点击它的答案DIV同一div内的问题的div设置为显示（如果是有道理的！）。任何帮助将不胜感激。 。答：

<div class="set"> 
<div class="question">What is the airspeed velocity of an unladen swallow?</div> 
<div class="answer">Although a definitive answer would of course require further measurements, published species-wide averages of wing length and body mass, initial Strouhal estimates based on those averages and cross-species comparisons, the Lund wind tunnel study of birds flying at a range of speeds, and revised Strouhal numbers based on that study all lead me to estimate that the average cruising airspeed velocity of an unladen European Swallow is roughly 11 meters per second, or 24 miles an hour. </div> 
</div> 

<div class="set"> 
<div class="question">What is the airspeed velocity of an unladen swallow?</div> 
<div class="answer">Although a definitive answer would of course require further measurements, published species-wide averages of wing length and body mass, initial Strouhal estimates based on those averages and cross-species comparisons, the Lund wind tunnel study of birds flying at a range of speeds, and revised Strouhal numbers based on that study all lead me to estimate that the average cruising airspeed velocity of an unladen European Swallow is roughly 11 meters per second, or 24 miles an hour. </div> 
</div> 

<div class="set"> 
<div class="question">What is the airspeed velocity of an unladen swallow?</div> 
<div class="answer">Although a definitive answer would of course require further measurements, published species-wide averages of wing length and body mass, initial Strouhal estimates based on those averages and cross-species comparisons, the Lund wind tunnel study of birds flying at a range of speeds, and revised Strouhal numbers based on that study all lead me to estimate that the average cruising airspeed velocity of an unladen European Swallow is roughly 11 meters per second, or 24 miles an hour. </div> 
</div> 

Answer 1

如果我正确理解你的问题，你应该 通过将所有答案隐藏在CSS的启动{显示：无;}

然后你可以使用jQuery来显示正确回答点击的问题：

$(document).ready (function() { 
    $('.question').click(function() { 
     $(this).next('.answer').show(); 
    }); 
}); 

编辑：你也可以使用.toggle（）而不是.show（）来显示/隐藏。

Answer 2

你或许应该看看这个question有类似的东西做。

基本上，你首先需要设置ID对您的元素，这样就可以识别一组类中的单个元素。

然后，您可以添加一个点击事件处理程序，它将设置选定的项目并显示相应的答案。

你可以看到语法在documentation here抢夺兄弟姐妹。