1

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

我想要做的如下：

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

如果我将“选定”类应用到 Category1，那么我希望它的子级向下滑动。如果将“选定”类应用于子级，那么我也希望扩展其父级 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>

提前谢谢你

4

1 回答 1

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。如果是，则显示父 li。

于 2012-04-09T20:03:26.130 回答