0

我一直在对我的论坛页面类别列表进行一些更新。

我已经进行了广泛的结构更改以使用 HTML5，这使得有必要更改显示/隐藏每个标题类别的 JQuery。

这是新的 JQuery 和 HTML5 结构：

http://jsfiddle.net/LYoung/JLVEs/1/

<div class="t">
    <h2><a href="#" class="sh">-</a> Gaming</h2>
</div>
<section>
    <div class="cat">
        <p><a class="catlnk" href="display.php?cat=General-Gaming&page=1">General Gaming</a><span>No work here, just play!</span></p>
    </div>
    <div class="cat">
        <p><a class="catlnk" href="display.php?cat=World-of-Warcraft&page=1">World of Warcraft</a><span>WOW specific discussion. No other games please.</span></p>
    </div>
</section>

我正在使用的 JQuery：

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

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

奇怪的是，这在 jsfiddle 上工作得很好。它完全符合我的预期，但在我的网页上，它显示/隐藏了所有类别。

谁能帮我找出原因并提供解决方案？

4

2 回答 2

2

问题是您的真实页面没有包装各个类别的 <div class="title"> 。因此，当您使用兄弟姐妹方法时，它会选择列表中的每个 <section> 标记。

于 2012-12-08T18:59:31.010 回答
0

您可能只想隐藏 div 后面的部分，而不是隐藏所有兄弟姐妹。而且您不需要使用 parent 两次：

if (show) {
    $(this).closest("div").next("section").fadeIn(500); // if possible make the selector it more specific using "div.t"
} else {
    $(this).closest("div").next("section").fadeOut(500);
}
于 2012-12-08T18:46:47.150 回答