如何根據所選項目向上或向下滑動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。如果是，則顯示父母李。