javascript - 单击菜单项时关闭 Canvas 外导航

Question

http://darrenbachan.com/playground/diamond-hand-car-wash/index.html

我想在这里完成的一些事情:

1. 当您单击菜单项以外的任何地方时，它会关闭导航
2. 当您点击一个菜单项时，它会关闭导航并动画显示一个 ID

Canvas 外导航仅出现在其移动 View 中。如果您在桌面上查看该站点，导航确实会将您动画化到一个特定的 ID，所以我在那里有一些 js，我猜可以将其用于 Canvas 外的那个。我读过几篇文章说要使用数据切换，但我无法让它发挥作用。

Answer 1

所以我想我会参与其中并提供一些解决方案。如果您只是想在有人点击您菜单中的链接时关闭您当前拥有的菜单，您可以非常简单地使用点击功能点击您拥有的菜单按钮，如下所示:

$('.navbar-collapse li a').on('click', function(){
  $('input.checkbox-toggle').click();
});

或者你可以像这样从复选框中删除选中的:

$('.navbar-collapse li a').on('click', function(){
  $('input.checkbox-toggle').prop('checked', false);
});

您可能想要添加一个 if 语句，以便它仅在移动屏幕尺寸下发生，如下所示:

$('.navbar-collapse li a').on('click', function(){
  if($(window).width() <= 767){
    $('input.checkbox-toggle').prop('checked', false);
  }
});

反之亦然，点击功能也会切换上方的点击。

然后您可以使用您已经准备好的滚动脚本，一切都应该按您希望的方式运行。

或者

我看到在您的网站上您已经在使用 bootstrap。 Bootstrap 内置了一个名为 scrollspy 的插件，它处理单页设计，允许您滚动到部分和类似的东西。使用它而不是您现有的脚本可能会更简单一些，并且会更好地为您服务，因为它也会处理替换导航栏中的事件类。对于您要通过网站实现的目标，它可能会好得多。

此外，在底部，我放置了一个指向 jsfiddle 演示的链接，该演示使用 scrollspy 以及一个非 Canvas 菜单，这与您在上面的站点中使用的内容基本相同，除了您可以只使用一个菜单来显示大的和移动屏幕，而不是在您的网站上放置两个菜单。看看这个 fiddle 演示，它有 scrollspy，就像我说的，而不是使用两个菜单，它只是在移动屏幕上重新设置 off canvas 菜单的样式，并使用 jquery 将类切换到 .menu-open 的主体> 当按下菜单按钮时。

我不太确定您是否想要相同类型的菜单叠加样式，因此我将其与您上面链接到的网站类似，但如果您希望它是一种不同类型的非 Canvas 样式，那么您只需更改 css 即可从左侧或右侧或任何位置切换它。

这是 fiddle 的链接 JSFiddle Demo

无论如何，希望这一切对您有所帮助，如果您有任何问题，请随时在下方发表评论。

P.S 我在查看您的页面源代码时注意到您在整个页面中都有 .container-fluid 包装 .containers。这根本不是必需的，很可能会导致底部出现水平滚动条。我不确定，但我想我会向您指出这一点。