Question

我正在构建的应用程序有以下菜单，我很难应用一些jquery规则来隐藏菜单的子类别。

我想做的事情如下：

当我第一次加载页面时，我希望每个类别的子项（child1，child2等）向上滑动（关闭）。通过代码，我会跟踪所选项目，因此如果我加载不同的页面，则应根据以下规则构建菜单：

如果我将“选定”类应用于，例如，Category1，那么我希望其子项向下滑动。如果将“selected”类应用于子级，那么我也希望其父级ul也被扩展。

案例1：选定的类适用于Category1

<ul>     
<li class="selected has-children first-child">Category1</a>                       
 <ul>
  <li class="first-child">Child1</li>
  <li class=" ">Child2</li>
  <li class=" ">Child3</li>
  <li class=" ">Child4</li>
  <li class=" ">Child5></li>
  <li class=" ">Child6</li>
  <li class="last-child">Child6</li>
 </ul>
</li>
<li class="has-children">Category2</a>
 <ul>
  <li class="first-child">Child1</li>
 </ul>
</li>
<li class="has-children last-child">Category3</a>
 <ul>
  <li class="first-child">Child1</li>
  <li class="last-child">Child2</li>
 </ul>
</li>
</ul>

Case 2: selected class applied to child4 (ul should be expanded)

<ul>     
<li class="selected has-children first-child">Category1</a>                       
 <ul>
  <li class="first-child">Child1</li>
  <li class=" ">Child2</li>
  <li class=" ">Child3</li>
  <li class="selected ">Child4</li>
  <li class=" ">Child5></li>
  <li class=" ">Child6</li>
  <li class="last-child">Child6</li>
 </ul>
</li>
<li class="has-children">Category2</a>
 <ul>
  <li class="first-child">Child1</li>
 </ul>
</li>
<li class="has-children last-child">Category3</a>
 <ul>
  <li class="first-child">Child1</li>
  <li class="last-child">Child2</li>
 </ul>
</li>
</ul>

提前告诉你

Answer 1

您是否希望与扩展/折叠这些菜单进行任何交互？或者您只是想在页面加载时应用此功能一次？如果是第二个，那么你需要定义类名：

li.parent {
   display:none;
}

li.selected {
   display:block;
}

您需要将此类名应用于所有父元素。任何具有类名selected的父元素都将自动显示其子元素。然后，使用这个jQuery：

$(function() {

   $('li.parent li').each(function() {
      var parent = $(this).parent('ul').parent('li');
      if($(this).hasClass('selected') || parent.hasClass('selected')) {
         parent.show();
      }
   });

});

循环遍历每个li子元素并检查它是否具有类名selected。如果是，则显示父李。

如何根据所选项目向上或向下滑动ul元素

1 个答案: