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

Question

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

我想要做的是如下：

当我第一次加载页面，我想每个类别的儿童（child1，的child2等）向上滑动（关闭）。通过代码，我跟踪选择的项目，所以如果我加载不同的页面，菜单应该按照以下规则构建：

如果我将类别“selected”应用于Category1，那么我想要其子女滑下来。如果将“选择”类应用于孩子，那么我希望其父母ul也可以扩展。

案例1：选择应用类产品组别

<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> 

Τhank你提前

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(); 
     } 
    }); 

}); 

这遍历每一丽子元素，并检查它是否在类名selected。如果是，则显示父母李。