Javascript Can'；不要选择孩子

我得到了这个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>

$（文档）.ready（函数（）{
$（“.sub”）.hide（）；
});
$（“.with sub”）。单击（函数（）{
$（this.find（“.sub”）.slideDown（“slow”，function（））{
});
});

---

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

您当前的代码不起作用，因为您正在尝试将事件绑定到DOM中尚不存在的元素-您需要将

click（）

处理程序放在DOMReady处理程序中

还要注意，HTML无效-只有

li

元素可以是

ul

元素的直接后代。试试这个：

<ul>
    <li>
        <a href="#">Test</a>
    </li>
    <li>
        <a href="#">Test2</a>
    </li>
    <li>
        <a href="#" class="with-sub">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>

---

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

$（“.with sub”）。单击（函数（）{
$（this.next（“ul”）.slideDown（）；
});
.sub{
显示：无；
}









我还建议您在中使用
.sub{display:none；}
CSS@MuchaZ你也修复了HTML吗？@MuchaZ很高兴我帮了你。如果这个答案解决了你的问题，请不要忘记把它标记为正确：）是的，当然。我可以在3分钟内完成。@AlexChar不是我的否决票，但我可以解释：因为你没有修复无效的HTML，就像它很好一样，但它不是。@dfsq添加了一个替代方案。
$(document).ready(function() {
    $(".sub").hide();
    $(".with-sub").click(function() {
        $(this).siblings(".sub").slideDown("slow");
    });
});