javascript - 响应式 jQuery 菜单

Question

我创建了一个响应式菜单，它在 480 像素及以下中断。如果出现以下情况，我有以下反应：

1. 用户点击“菜单”链接。
2. 菜单滑出。
3. 子菜单幻灯片也可以在 onClick 上切换。
4. 但是您不能单击任何页面。

这与返回false有关吗？

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

您可能需要将浏览器的大小调整为 480 像素或以下，以查看响应式导航的实际效果。

这是导航的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应该发生了。