jquery - 使用 jquery 切换

Question

小提琴

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

对于具有通用逻辑的代码块，您绝对应该尝试通用化您的代码。考虑到这一点，使用类而不是 ids，然后试试这个：

<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();
});

示例小提琴

请注意，您的 HTML 属性也有"错误的位置。style

Answer 2

请看这个演示

$("#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

您需要对点击进行额外检查。

$("#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();
    }
});

Answer 5

您可以执行以下操作

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

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

Answer 6

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

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

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

这是小提琴

Answer 7

我可能会这样做

<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();
});

演示：小提琴