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，但我会坚持您的风格。

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

1 个答案: