jquery end 阻止菜单上最后一个链接上的 default()

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;
        });
    }
});

我还附加了一个可以正常工作的 fiddle 。

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

Answer 1

问题是您将事件处理程序绑定(bind)到 <li>元素，然后单击 <a>元素在 DOM 中向上传播。当您单击该链接时，它会从该链接冒泡到 <li> (不包含子菜单)，然后最终到达另一个 <li>其中确实包含一个子菜单，此时该点击事件(链接后)的默认行为被抑制。将您的事件处理程序绑定(bind)到 <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