javascript - 使用 hasClass() 隐藏链接

Question

我有这个列表

<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>

“current_page_parent”类是我所在的页面。

但是我想在你不在“.current_page_parent”中时隐藏所有“.children”。

我制作了这个 jQuery 脚本:

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

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

当我加载页面时，所有“.children”都会出现..

感谢帮助

Answer 1

除了你的 JS 逻辑有点偏离，你可以单独在 CSS 中实现:

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

然后您需要做的就是在所需的 li 元素上切换 current_page_parent 类。