javascript - 无法单击 onClick() 事件下拉列表中的 anchor 标记

Question

我有这个 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>

以下 Jquery 用于在将鼠标悬停在父级上时显示下拉列表:

$('.parent_menu').on('touchstart click', function(e){
                e.stopPropagation(); 
                e.preventDefault();

                $(".child-menu", this).slideToggle(400); 

            }       
        );

这里发生的情况是，如果我单击父菜单，则会显示下拉菜单。但我无法单击下拉列表中子菜单项(如链接 1、链接 2 等)的 anchor 标记。我认为这是由于上面使用的 slideToggle() 或 onClick() 造成的。我该如何修复它以使子菜单链接可点击？

Answer 1

这些是有原因的吗？

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

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

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