Wie nach oben oder unten ul Elemente auf dem ausgewählten Element

Question

schieben Ich habe das folgende Menü für eine Anwendung, die ich erstelle und ich habe eine harte Zeit, die Anwendung einiger jquery Regeln, um die Unterkategorien des Menüs zu verbergen.

Was will ich tun ist, wie folgt:

Als ich die Seite laden, wie ich die Kinder wollen (child1, child2 etc) jeder Kategorie (in der Nähe) nach oben zu schieben. Durch Code verfolge ich das ausgewählte Element. Wenn ich also eine andere Seite lade, sollte das Menü gemäß der folgenden Regel erstellt werden:

Wenn ich eine Klasse "ausgewählt" z. B. auf Kategorie1 anwende, möchte ich seine Kinder rutschen herunter. Wenn die Klasse "selected" auf ein Kind angewendet wird, möchte ich auch dessen Eltern-UL erweitern.

Fall 1: ausgewählte Klasse

<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 Sie im Voraus

Answer 1

Möchten Sie jegliche Interaktivität mit Expansions-/Kollabieren diese Menüs Category1 angewendet? Oder möchten Sie diese Funktionalität nur einmal beim Laden von Seiten anwenden? Wenn es das zweite ist, dann müssen Sie Klassennamen definieren:

li.parent { 
    display:none; 
} 

li.selected { 
    display:block; 
} 

Sie benötigen diese Klassennamen für alle übergeordneten Elemente anzuwenden. Alle übergeordneten Elemente, die den Klassennamen selected haben, zeigen automatisch ihre untergeordneten Elemente an. Dann wird mit dieser jQuery:

$(function() { 

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

}); 

Dies jedes li Kind-Element einer Schleife durch und prüft, ob sie den Klassennamen hat selected. Wenn dies der Fall ist, zeigt es die Eltern li.