javascript - Jquery 查找父级的子级

Question

我在 li 中有一个链接，当您单击它时，它应该打开一个 ul，也包含在 li 中。但我似乎无法让它选择正确的元素。代码如下

HTML

<ul>
    <li>
        <a href="#">hi</a>
        <ul>
            <li class="hidden">more stuff</li>
        </ul>
    </li>
</ul>

CSS

.hidden{display:none;}

JS

$( "a" ).click(function() {
     $(this).parent("li").children("ul").css("display","block");
});

Answer 1

由于 ul 是 a 的下一个兄弟，因此您可以使用 next来访问它。然后，您可以查看 ul 的子级 ( children ) 或后代 ( find ) 中的 .hidden 并删除该类 ( removeClass ) :

$(this).next().children(".hidden").removeClass("hidden");

实例:

$("a").on("click", function() {
  $(this).next().children(".hidden").removeClass("hidden");

  return false;
});

.hidden {
  display: none;
}

<ul>
  <li>
    <a href="#">one</a>
    <ul>
      <li class="hidden">more stuff</li>
    </ul>
  </li>
  <li>
    <a href="#">two</a>
    <ul>
      <li class="hidden">more stuff</li>
    </ul>
  </li>
  <li>
    <a href="#">three</a>
    <ul>
      <li class="hidden">more stuff</li>
    </ul>
  </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>