Jqueryが利用可能であれば、子リンクを表示または非表示にする

Question

Jqueryに関する質問があります。 ul.childrenを持たないLink1をクリックすると、current_page_itemクラスが追加されます（Wordpressによって自動的に追加されるため、このコードには表示されません）。次に、Link2のul.childrenを非表示にする必要があります。

リンクpage_item_has_children current_page_itemの両方を持つリンク2をクリックすると、この場合はul.childrenが表示されます。私は私のコードが迷惑行為を試みたが、それは絶対に間違っていることを知っている。あなたのアドバイスを教えてください。どうもありがとう。

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

どのように簡単に、単純にクリック1の子供を示し、その後、すべてのネストされたUL要素を隠してはどうですか？それは最初にすべてのネストされたULSが隠されている、ロード時になるように、それを編集

$(".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>

。お役に立てれば！クリックしたメニューをローカルストレージに保存するためにもう一度編集します。残念ながら、セキュリティ上の理由から、これはここでは機能しません。フィドルとしてそれを参照してください：https://jsfiddle.net/snowMonkey/fnuvvLwb/

Answer 2

このソリューションは、あなたのシナリオに向けて、もう少しです（コメントをもとに編集した）：JavaScriptのセレクタのすべてで

$(".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>