jQuery根据位置打开和关闭嵌套的ul导航

Question

我在wordpress中做一个子导航，并有一个嵌套的列表样式菜单。下面是一个HTML的例子。无论哪个目前的项目都有li类“current_page_item”。我需要折叠所有子菜单，除非父级或其中一个子级上有current_page_item类。

<ul> 
<li class="current_page_item"><a href="#">Parent Item</a> 
    <ul class="children"> 
    <li><a href="#">Child page</a></li> 
    <li><a href="#">Child page</a></li> 
    <li><a href="#">Child page</a></li> 
    <li><a href="#">Child page</a></li> 
    </ul> 
</li> 
<li><a href="#">Parent Item</a> 
    <ul class="children"> 
    <li><a href="#">Child page</a></li> 
    <li><a href="#">Child page</a></li> 
    </ul> 
</li> 
<li><a href="#">Parent Item</a> 
    <ul class="children"> 
    <li><a href="#">Child page</a></li> 
    <li><a href="#">Child page</a></li> 
    </ul> 
</li> 
<li><a href="#">Parent Item</a></li> 
<li><a href="#">Parent Item</a></li> 
</ul> 

这到目前为止，这工作，但我不知道它是否可以因为有一些闪烁打开，然后再次关闭改善....

jQuery('ul.children').slideUp(); 
jQuery('li.current_page_item ul.children').slideDown('medium'); 
jQuery('li.current_page_item').parent().slideDown('medium'); 

Answer 1

如果你想要的东西向上滑动或下来，但不能同时使用这样的事情：

// In one line: 
jQuery('ul.children').not(jQuery('ul.children:has(li.current_page_item), li.current_page_item ul.children').slideDown()).slideUp(); 

// In three more readable lines: 
var $active = jQuery('ul.children:has(li.current_page_item), li.current_page_item ul.children'); 
jQuery('ul.children').not($active).slideUp(); 
$active.slideDown(); 

或者，如果你想要的一切，开始了隐藏，然后滑下有源元件，使用此：

jQuery('ul.children').hide(); 
jQuery('ul.children:has(li.current_page_item), li.current_page_item ul.children').slideDown(); 

当然，你也可以使用$而不是jQuery，但我会坚持你的风格。