javascript - 无法选择 child

Question

我得到了这个 HTML:

                <ul>
                <a href="#"><li>Test</li></a>
                <a href="#"><li>Test2</li></a>
                <a href="#" class="with-sub"><li>Test3</li>
                    <ul class="sub">
                        <li><a href="#">Sub1</a></li>
                        <li><a href="#">Sub2</a></li>
                        <li><a href="#">Sub3</a></li>
                    </ul>
                </a>
            </ul>

和 jQuery:

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    $( document ).ready(function() {
        $(".sub").hide();
    });
    $(".with-sub").click(function() {
        $(this).find(".sub").slideDown( "slow", function() {

        });
    });
</script>

当我点击“with-sub”类的链接时，什么也没有发生。

Answer 1

您可以将 html 和 jquery 更改为以下内容:

$(".with-sub").click(function() {
  $(this).next("ul").slideDown();
});

.sub {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <a href="#">
    <li>Test</li>
  </a>
  <a href="#">
    <li>Test2</li>
  </a>
  <a href="#" class="with-sub">
    <li>Test3
      <ul class="sub">
        <li><a href="#">Sub1</a>

        </li>
        <li><a href="#">Sub2</a>

        </li>
        <li><a href="#">Sub3</a>

        </li>
      </ul>
    </li>
  </a>
</ul>

正如评论中提到的，您的 html 不正确。 ul 元素可以包含零个或多个 li 元素，最终与 ol 和 ul 元素混合。

$(".with-sub").click(function() {
  $(this).find("ul").toggle();
});

.sub {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="#">Test</a>
  </li>
  <li>
    <a href="#">Test2</a>
  </li>
  <li class="with-sub"><a href="#">Test3</a>
    <ul class="sub">
      <li>
        <a href="#">Sub1</a>
      </li>
      <li>
        <a href="#">Sub2</a>
      </li>
      <li>
        <a href="#">Sub3</a>
      </li>
    </ul>
  </li>
</ul>