响应式jQuery菜单

Question

我已经创建了一个响应式菜单，它在480像素及以下时会中断。我已经使以下内容做出反应：

1. 用户单击“菜单”链接。
2. 菜单slideToggles出来。
3. 子菜单也在单击时slideToggle出来。
4. 但是您无法单击页面上的任何页面。

这是否与返回false有关？

您可以在此处查看示例：http://www.stlredtails.com/construction/ 您可能需要调整浏览器大小以查看响应式导航栏的操作。

以下是导航的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;
    }
);

谢谢大家！

- Aaron Brewer

---

实际上，在某些尺寸下我会遇到不同的错误：如果菜单分成几行，但在折叠成列菜单之前，一些子菜单会出现在以下菜单项下方。 - John Dvorak

尝试点击子菜单项，例如“使命宣言”和“董事会”。这将切换父菜单并将其向上滑动，而不会跳转到正确的链接。 - Aaron Brewer

列菜单对我来说完美无缺。在多行菜单中，链接重叠了。 - John Dvorak

对我来说运行得很好，而且看起来很棒，我可以补充一下。 - Luke

新闻对我有效，但团队似乎不行（似乎还没有它们的链接）。 - aug

Answer 1

问题源于 return false。当您单击链接时，也会单击祖先的li和ul。在链接“激活”之前，绑定到祖先点击事件的函数执行。由于它们return false，因此防止了默认的浏览器行为（导航离开）。

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

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

这将搜索导航菜单中所有仅是其父元素的唯一子元素链接（在本例中，恰好是您希望继续作为链接工作的链接），并阻止祖先节点的点击事件执行 - return false 不应再发生。

- João Paulo Macedo

---

谢谢您的回复，也感谢您的解释。但是出于某种原因，这破坏了我的代码。我不知道为什么。 - Aaron Brewer

嗨，亚伦。我猜你是复制粘贴的，对吧？我在 jsfiddle 上编写了代码，但由于某种原因会在代码末尾放置一个不可见字符。如果你在最后一行的末尾按退格键（"});"），显然什么也不会发生，但你会删除那个字符。从那时起，代码应该可以正常运行。 - João Paulo Macedo