我得到了这个 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”类的链接时,什么也没有发生。
最佳答案
您可以将 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>
关于javascript - 无法选择 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32868771/