无法在onClick()事件下拉列表中单击锚标记

Unable to click anchor tags inside onClick() event drop-down

本文关键字：单击 下拉列表 事件 onClick      更新时间：2023-09-26

我有这个HTML:

<ul>
    <li class="parent_menu">
        <ul class="child-menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </li>
</ul>

当鼠标悬停在父元素上时显示下拉列表:

$('.parent_menu').on('touchstart click', function(e){
                e.stopPropagation(); 
                e.preventDefault();
                $(".child-menu", this).slideToggle(400); 
            }       
        );

这里发生的是，下拉菜单显示如果我点击父菜单。但是我无法在下拉列表中单击子菜单项的锚标记(如Link 1, Link 2等)。我认为这是由于上面使用的slideToggle()或onClick()。我如何修复它，使子菜单链接是可点击的?

这些是有原因的吗?

e.stopPropagation(); 
e.preventDefault();

preventDefault()会杀死你的锚。如果您不需要它们，请删除它们。

http://jsfiddle.net/isherwood/Qv8hn

以下是如何使用stopPropagation()来防止链接切换菜单的方法: 
$('.parent_menu').on('touchstart click', function (e) {
    $(".child-menu", this).slideToggle(400);
}).find('a').on('touchstart click', function (e) {
    e.stopPropagation(); 
});
http://jsfiddle.net/isherwood/Qv8hn/1

相关文章：