响应jQuery菜单

Question

我已经创建了一个响应菜单，打破480 at及以下。在下列情况下，我有以下反应：

1. 用户单击“菜单”链接。
2. 菜单slideToggles出来了。
3. 子菜单slideToggle out onClick也是。
4. 但您不能单击任何页面。

这与返回假有关吗？

您可以在这里查看示例：http://www.stlredtails.com/construction/

您可能需要调整浏览器的大小，使浏览器位于或低于480 in，以查看响应导航的运行情况。

下面是导航的jQuery：

jQuery(".navigation ul").hide();
jQuery("#navigation").click(
    function() {
       jQuery(this).siblings("ul").slideToggle(150, "swing");
       return false;
    }
);
jQuery(".navigation > ul > li").click(
    function() {
       jQuery(this).children("ul").slideToggle(150, "swing");
       return false;
    }
);

谢谢大家！

Answer 1

问题来自于return false。单击链接时，还单击祖先li和ul。在链接“激活”之前，绑定到祖先的函数单击事件执行。由于它们是return false，因此会防止默认的浏览器行为(导航离开)。

对于这种菜单行为，有更好的解决方案，但是使用您已经拥有的(并且假设您不会更改html)，您可以简单地将以下内容添加到您的javascript中：

$('.navigation').on('click', 'a:only-child', function(e) {
    e.stopPropagation();
});

这将搜索导航菜单中的所有链接(在本例中，这些链接恰好是希望继续作为链接工作的链接)，并防止祖先单击事件执行-- return false不应该再发生了。