我有这个 list

<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”都会出现。

谢谢您的帮助

最佳答案

就像我在评论中提到的那样,您的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/

10-05 20:28
查看更多