Javascript 隐藏与hasClass（）的链接

我有这个清单

<div id="sideMenu">
    <li class="page_item page_item_has_children"></li>
    <li class="page_item page_item_has_children">
        <ul class="children">
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="page_item page_item_has_children"></li>
    <li class="page_item page_item_has_children current_page_parent">
        <ul class="children">
            <li></li>
            <li></li>
        </ul>
    </li>
</div>

加载页面时，将显示所有“.children”

谢谢你的帮助

找到了它

您忘记在div中写入

。 在div中添加ul，它应该是好的

---

最小的错误是最难发现的：）

除了JS逻辑有点不正确之外，您可以单独在CSS中实现这一点：

.children {
    display: none;
}
.current_page_parent .children {
    display: block;
}

---

然后，您只需在所需的

li

元素上切换

当前页面\u父类。
这将在
侧菜单中没有
时隐藏
.children

$('.children').toggle(!(!!$('#sideMenu .children').length));

正如我在评论中提到的，您的HTML标记不太正确。如果您希望使用JavaScript方法和CSS解决这个问题（如Rory McCrossan提到的，在大多数情况下，哪一个是更好的解决方案）。然后你只需要调整几件事

HTML:

<ul id="sideMenu">
    <li class="page_item page_item_has_children">parent</li>
    <li class="page_item page_item_has_children">
        parent
        <ul class="children">
            <li>test 1</li>
            <li>test 2</li>
        </ul>
    </li>
    <li class="page_item page_item_has_children">parent</li>
    <li class="page_item current_page_parent">
        parent
        <ul class="children">
            <li>test a</li>
            <li>test b</li>
        </ul>
    </li>
</ul>

$(function() {
    var has_children = $('ul#sideMenu li').hasClass('page_item_has_children');
    var current_page = $('ul#sideMenu  li').hasClass('current_page_parent');

    if (has_children) {
        $('.page_item_has_children .children').hide();
    } else if (current_page) {
        $('.current_page_parent .children').show();
    }
});

注意：我更改了一些选择器<代码>$（'ul#侧菜单li'）
以匹配标记更改。并将if-else中的
.children
类的范围限定为其相应的用例

演示：

<ul id="sideMenu">
    <li class="page_item page_item_has_children">parent</li>
    <li class="page_item page_item_has_children">
        parent
        <ul class="children">
            <li>test 1</li>
            <li>test 2</li>
        </ul>
    </li>
    <li class="page_item page_item_has_children">parent</li>
    <li class="page_item current_page_parent">
        parent
        <ul class="children">
            <li>test a</li>
            <li>test b</li>
        </ul>
    </li>
</ul>

$(function() {
    var has_children = $('ul#sideMenu li').hasClass('page_item_has_children');
    var current_page = $('ul#sideMenu  li').hasClass('current_page_parent');

    if (has_children) {
        $('.page_item_has_children .children').hide();
    } else if (current_page) {
        $('.current_page_parent .children').show();
    }
});

您缺少一个
ul
。侧菜单应该是
ul
，您的选择器可能应该是
$（'ul#sideMenu li'）
它可以工作，但我放弃了一件事，我已经将另一个ul.children从ul.children转换成了一个li