Question

请查看我的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

切换按钮以按类隐藏元素组并在JavaScript或JQuery中显示nextSibling

2 个答案: