javascript - Jquery 显示或隐藏子链接(如果可用)

Question

我有一个关于 Jquery 的问题。如果我点击 Link1，它没有任何 ul.children 并且将添加 current_page_item 类(此代码中未显示，因为它将由 Wordpress 自动添加)，然后 ul.children 会被添加。 Link2 中的 child 应该被隐藏。

如果我单击链接 2，该链接将同时具有 page_item_has_children current_page_item 类，在本例中应显示 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">
	<li class="page_item"><a href="#">Link3</a></li>
	<li class="page_item "><a href="#">Link4</a></li>
  </ul>
</li>
</ul>

Answer 1

此解决方案更适合您的场景(根据评论进行编辑):

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