Jquery zeigen oder verbergen Kinder Link, wenn es verfügbar ist

Question

Ich habe eine Frage zu Jquery. Wenn ich auf Link1 klicke, das keine ul.children hat und die Klasse current_page_item hinzugefügt wird (in diesem Code nicht gezeigt, da es automatisch von Wordpress hinzugefügt wird), sollte ul.children in Link2 ausgeblendet werden.

Wenn ich auf Link 2 klicke, der beide Klasse page_item_has_children current_page_item hat, sollte in diesem Fall ul.children angezeigt werden. Ich habe versucht, meinen Code brüllen, was ich weiß, dass es absolut falsch ist. Bitte geben Sie mir Ihre Ratschläge. Danke vielmals.

if($(.navigation).hasClass(page_item_has_children)){ 
 
    (.navigation .page_item_has_children .children).hide(); 
 
}else if($(.navigation).hasClass(page_item_has_children) && $(.navigation).hasClass(current_page_item)){ 
 
    (.navigation .page_item_has_children .children).show(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="navigation"> 
 
<li><a href="#">Link1</a></li> 
 
<li class="page_item_has_children current_page_item"><a href="#">Link2</a> 
 
    <ul class="children"> 
 
\t <li class="page_item"><a href="#">Link3</a></li> 
 
\t <li class="page_item "><a href="#">Link4</a></li> 
 
    </ul> 
 
</li> 
 
</ul>

Answer 1

Wie wäre es einfach alle verschachtelten UL Elemente versteckt, dann einfach die Kinder des angeklickten eine zeigt?

$(".navigation li").each(function() { 
 
    // When we first load, hide all nested menus. 
 
    $(this).children("ul").hide(); 
 
    if (localStorage.menuNumber) { 
 
    $(".navigation li").eq(localStorage.menuNumber).children().show(); 
 
    } 
 
    }) 
 
    .on("click", function() { 
 
    // When any top-level ul is clicked, hide the 
 
    // nested menus then show the current one. 
 
    $(this).parent().children().find("ul").hide(); 
 
    $(this).children().show(); 
 
    // We also want to persist this selection, 
 
    // should the user refresh... 
 
    localStorage.menuNumber = $(this).index; 
 
    
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="navigation"> 
 
    <li><a href="#">Link1</a> 
 
    </li> 
 
    <li class="page_item_has_children current_page_item"><a href="#">Link2</a> 
 
    <ul class="children"> 
 
     <li class="page_item"><a href="#">Link3</a> 
 
     </li> 
 
     <li class="page_item "><a href="#">Link4</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

es Edited so dass, wenn es anfänglich geladen wird, alle verschachtelten uls versteckt sind. Hoffe das hilft! Und erneut bearbeitet, um das angeklickte Menü im lokalen Speicher zu speichern. Leider wird dies aus Sicherheitsgründen hier nicht funktionieren. Sehen Sie es als eine Geige: https://jsfiddle.net/snowMonkey/fnuvvLwb/

Answer 2

Diese Lösung ein bisschen mehr in Richtung Ihrer Szenario (herausgegeben basierend auf Kommentar):

$(".navigation li").on("click", function() { 
 
    if ($(this).hasClass("page_item_has_children") && $(this).hasClass("current_page_item")) { 
 
    $(".navigation .children").show(); 
 
    } else { 
 
    $(".navigation .children").hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="navigation"> 
 
    <li><a href="#">Link1</a> 
 
    </li> 
 
    <li class="page_item_has_children current_page_item links"><a href="#">Link2</a> 
 
    <ul class="children"> 
 
     <li class="page_item"><a href="#">Link3</a> 
 
     </li> 
 
     <li class="page_item "><a href="#">Link4</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>