Question

我有一个似乎工作得很好的幻灯片菜单，问题是如果你选择一个它应该做的链接，如果你选择一个有孩子的链接，那么preventdefault（）就会启动它滚动到它的孩子，我很高兴到目前为止，但是一旦你到达链接的末尾，因为没有更多的孩子，链接应该正常工作，但事实并非如此。

这是jquery

$(".menu li").click(function(e) {
    if($(this).children('.sub-menu').length > 0) {
        e.preventDefault();
        $(this).children('.sub-menu').addClass('open');
    }
    else  {
        $(".menu li").ready(function(){
            return true;
        });
    }
});

我还附上了一个工作小提琴。

http://jsfiddle.net/R6wHG/16/

Answer 1

问题在于您将事件处理程序绑定到<li>元素，并且<a>元素上的单击会向DOM传播。当您点击该链接时，它会从该链接冒泡到<li>（不包含子菜单），然后最终到达所做的另一个<li> 包含子菜单，此时将禁止该单击事件（链接后）的默认行为。将您的事件处理程序绑定到<a>元素本身，并检查下一个元素是否为.sub-menu元素：

$(".menu a").click(function (e) {
    if ($(this).next('.sub-menu').length > 0) {
        e.preventDefault();
        $(this).next('.sub-menu').addClass('open');
    }
});

Updated jsFiddle

Answer 2

您还需要stopPropagation()，因为在父preventDefault()元素上调用了li：

$(".menu li").click(function (e) {
    e.stopPropagation();
    if ($(this).children('.sub-menu').length > 0) {
        e.preventDefault();
        $(this).children('.sub-menu').addClass('open');
    }
});

Example fiddle

注意我也删除了return true，因为它是多余的。

jquery end阻止菜单上最后一个链接的default（）

2 个答案: