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等）。我认为这是由于上面使用的slideToggle()或onClick()。如何修复它以便可以点击子菜单链接？

Answer 1

这些是有原因的吗？

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

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

1 个答案: