3

我创建了一个响应式菜单,它在 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;
    }
);

谢谢你们!

4

1 回答 1

4

问题来自return false. 当您单击链接时,您也在单击祖先liul. 在链接“激活”之前,绑定到祖先单击事件的函数会执行。由于它们return false阻止了默认浏览器行为(导航离开)。

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

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

这将搜索导航菜单中所有作为其父级唯一子级的链接(在这种情况下,恰好是您想要继续作为链接工作的链接)并阻止祖先单击事件执行 - 不return false应该发生了。

于 2012-12-19T02:15:52.710 回答