切换按钮按类别隐藏的元素组和在JavaScript或JQuery的

Question

显示nextSibling请看看我的HTML标记：

<button class="btn">Toggle</button> 
<p class="para">This is a text</p> 

<!-- when .btn[0] click then .para[0] will be display block but all other para[1],para[2],....,para[n] will be display none--> 


<button class="btn">Toggle</button> 
<p class="para">This is a text</p> 

<!--- .btn[1] only works for .para[1]--> 


<button class="btn">Toggle</button> 
<p class="para">This is a text</p> 

<!--- .btn[2] only works for .para[2]--> 

当.btn[0]被点击然后.para[0]应该是display:block，但所有其他para[1]，para[2]， ...，para[n]将是display:none。

如何在JavaScript或JQuery中实现这一点（不添加唯一的ID）？

Answer 1

可以隐藏所有使用CSS .para默认：

.para { 
    display: none 
} 

，并使用下面的代码来显示预期的段落，以及隐藏其他段落

$('.btn').click(function() { 
    $('.para').hide(); 
    $(this).next().show(); 
}); 

Fiddle Demo

Answer 2

试试这个

$(document).ready(function(){ 
    $('.para').hide(); 
    $('.btn').click(function() { 
     $('.para').hide(); 
     $(this).next().show(); 
    }); 
}); 

见FIDDLE