用jquery制作垂直滑动菜单

Question

这是我的html：

<ul id="dmenu">
    <li><a href="#">menu item one</a></li>

    <li><a href="#">menu item two</a>
            <ul class="displayNone">
                <li><a href="#">menu item one</a>
            </ul>
    </li>
</ul>

当用户单击其中一个 a 标签时，我希望我的代码检查父 li 标签中是否有任何 ul 标签。如果有，那么我想阻止 a 标签的默认操作并滑动切换子 ul 元素

我的 jquery 自动取款机：

$('#dmenu > a').click(function(e) {
    if (this.parent().has('ul')) {
        e.preventDefault();
        $(this).children().slideToggle();
    }
});

Answer 1

您正在对 a 的子项进行滑动切换

将$(this).children().slideToggle(); 更改为

$(this).parent().children('ul').slideToggle();

您的选择器 #dmenu > a 也是错误的 - 您的顶级菜单没有该 ID，如果有，则没有直接锚作为 ul 的子级 - 删除 > 并将 ID dmenu 添加到你置顶 ul 或容器元素

编辑

正如 Austin 所指出的，由于您有嵌套列表，因此您可能希望将点击事件限制在顶层，以便您可以使用 #dmenu > li a

Example