1

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

<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 应该显示/隐藏section与链接的容器 div 处于对等级别的链接。

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

$(".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 ? "-" : "+");
});

我想我可能在这里遗漏了一些基本重要的东西，所以如果有人能帮我找出我做错了什么，我们将不胜感激。

蒂亚:)

4

2 回答 2

6

不知道你为什么要使用.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 ? "-" : "+");
});
于 2012-11-30T13:08:14.427 回答
0

如果您想隐藏对等点，您可以使用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/

于 2012-11-30T13:19:31.780 回答