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

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

Answer 2

就像我在评论中提到的，你的HTML标记不太正确。如果你想用你的JavaScript方法和CSS解决这个问题（像Rory McCrossan所提到的那样，在大多数情况下哪个是更好的解决方案IMO ）。然后你只需要调整一些东西......

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

<强> JS：

$(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#sideMenu li')以匹配标记更改。并将if else中的.children类限定为适当的用例。

<强>演示：

http://jsfiddle.net/tdnLa532/

Answer 3

找到它。

你忘了在div中写<ul>。在div中添加ul应该是好的。

最小的错误是最难找到的：）

Answer 4

当ERROR 65-58: Name 'Accounts Per Country Incl. Developing$A3:A3' is too long for a SAS name in this context.内没有.children时，这会隐藏.children。

#sideMenu

隐藏与hasClass（）的链接

4 个答案: