jquery - 切换jQuery

Fiddle
HTML格式：

<div id="p1">
<a href="javascript:void(0)">p1</a>
<p "style=display:none;">hi</p>
</div>
<div id="p2">
<a href="javascript:void(0)">p1</a>
<p "style=display:none;">welcome</p>
</div>

脚本：

$("#p1").click(function () {

    $("#p1 p").toggle();
});
$("#p2").click(function () {

    $("#p2 p").toggle();
});

在这里，当我点击p1时，它显示了它的内容和类似的p2。我需要的是只显示点击的内容描述另一个需要隐藏。我该怎么做。

最佳答案

对于具有公共逻辑的代码块，您绝对应该尝试对代码进行泛型化。考虑到这一点，请使用类而不是id，并尝试执行以下操作：

<div id="p1" class="content-toggle">
    <a href="javascript:void(0)">p1</a>
    <p style="display:none;">hi</p>
</div>
<div id="p2" class="content-toggle">
    <a href="javascript:void(0)">p1</a>
    <p style="display:none;">welcome</p>
</div>

$('.content-toggle').click(function() {
    $('.content-toggle p').hide();
    $('p', this).show();
});

Example fiddle
注意，您在HTML的"属性中的style位置也不正确。

关于jquery - 切换jQuery，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18312123/