用jquery切换

Question

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。我需要的是只显示点击的内容描述，另一个需要隐藏。我怎么能这样做。

Answer 1

对于具有通用逻辑的代码块，您绝对应该尝试对代码进行泛化。考虑到这一点，使用类而不是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位置错误。

Answer 2

请参阅 demo

$("#p1").click(function () {
    $("p").each(function() {
        if ($(this).parent("a").attr("id") !== "p1") {
            $(this).hide();
        }
    });
    $("#p1 p").toggle();
});
$("#p2").click(function () {
    $("p").each(function() {
        if ($(this).parent("a").attr("id") !== "p2") {
            $(this).hide();
        }
    });
    $("#p2 p").toggle();
});

Answer 3

您可以执行以下操作

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

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

Answer 4

DEMO

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

Answer 5

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

    $("#p1 p").css('display','');
    $("#p2 p").css('display','none');
});
$("#p2").click(function () {

    $("#p2 p").css('display','');
    $("#p1 p").css('display','none');
});

这是fiddle

Answer 6

我可以这样做

<div class="item"> 
    <a class="header" href="#">p1
        <p style="display:none;">hi</p>
    </a>
</div>
<div class="item"> 
    <a class="header" href="#">p2
        <p style="display:none;">hi</p>
    </a>
</div>

和

var $ps = $('.item p')
$(".item a").click(function (e) {
    var $this = $(this), $p = $this.children('p');
    $ps.not($p).hide();
    $p.toggle();
    e.preventDefault();
});

演示：Fiddle

Answer 7

您需要额外检查点击次数。

$("#p1").click(function () {
    $("#p1 p").toggle();
    if ($("#p2 p").is(':visible')) {
        $("#p2 p").toggle();
    }
});
$("#p2").click(function () {
    $("#p2 p").toggle();
    if ($("#p1 p").is(':visible')) {
        $("#p1 p").toggle();
    }
});