我有这个 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/