Question

我一直在处理论坛页面类别列表的一些更新。

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

这是新的JQuery和HTML5结构：

<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完全正常。它完全符合我的期望，但在my webpage上，它显示/隐藏了所有类别。

任何人都可以帮我找出原因并提供解决方案吗？

Answer 1

问题是您的真实网页没有＆lt; div class =“title”＆gt;这是包装各个类别。因此，当您使用兄弟姐妹方法时，它会选择每个＆lt;部分＆gt;列表中的标签。

Answer 2

您可能只想隐藏div后面的部分，而不是隐藏所有的sibbling。而且您不需要使用父母两次：

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

JQuery隐藏了比应该更多的内容

2 个答案: