Question

我试图在我的页面上显示/隐藏内容功能：

<div>
    <div class="t">             
        <h2><a href="#" class="sh" id="t1">-</a> Title 1</h2>
    </div>

    <section class="title1 title">
        <div class="cat">
            <p>Category 1<span>This is the first category</p>
        </div>

        <div class="cat">
            <p>Category 2<span>This is the second category</p>
        </div>

        <div class="cat">
            <p>Category 3<span>This is the third category</p>
        </div>
    </section>
</div>

我想我一直都很简单。基本上，对于每个部分，此标记将重复进行。当您单击链接时，jquery应显示/隐藏与链接的容器div同级别的section。

这是我所拥有的。它不会产生任何错误，但它也不会隐藏这些部分。但是，它会更改链接的文字：

$(".sh").click(function() {
    var show = ($(this).text() === "+");

    if (show) {
        $(this).parent("div").each("section", function() {$(this).fadeIn(500)});
    }
    else
    {
        $(this).parent("div").each("section", function() {$(this).fadeOut(500)});
    }
    $(this).text(show ? "-" : "+");
});

我想我可能会遗漏一些根本重要的东西，所以如果有人能帮我弄清楚我做错了什么，我们将非常感谢你的帮助。

TIA：）

Answer 1

不确定您使用.each()的原因，这样的事情应该有效：

$(".sh").click(function() {
    var show = ($(this).text() === "+");

    if (show) {
        $(this).parents("div").siblings("section").fadeIn(500);
    }
    else
    {
        $(this).parents("div").siblings("section").fadeOut(500);
    }
    $(this).text(show ? "-" : "+");
});

Answer 2

如果您想隐藏啤酒，可以使用siblings()来识别它们：

$('.sh').click(function() {
    var show = ($(this).text() === "+");
     if (show) {
        $(this).parents("div").siblings("section").fadeIn(500);
    } else {
        $(this).parents("div").siblings("section").fadeOut(500);
    }
    $(this).text(show ? "-" : "+");
});

http://jsfiddle.net/RvHhd/

在jquery中隐藏父对等点

2 个答案: