http://darrenbachan.com/playground/diamond-hand-car-wash/index.html
我想在这里完成的几件事：
画布外导航仅出现在其移动视图中。如果您在桌面上查看该网站，导航确实会将您设置为特定 ID，因此我有一些 js，我猜这些 js 可以用于画布外的。我读过几篇文章说要使用数据切换，但我无法让它发挥作用。
【问题讨论】：
标签： javascript jquery html css
所以我想我会插话并提供几个解决方案。如果您只是想在有人单击菜单中的链接时关闭当前所在的菜单，您可以非常简单地使用单击功能单击那里的菜单按钮，如下所示：
$('.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 内置了一个名为 scrollspy 的插件，它可以处理一页设计，让您可以滚动到该性质的部分和事物。使用它而不是您现有的脚本可能会更简单一些，并且会更好地为您服务，因为它也将处理替换导航栏中的活动类。这对于您想要通过您的网站实现的目标可能会更好。
另外，在底部，我放置了一个 jsfiddle 演示的链接，该演示使用了 scrollspy 以及一个关闭画布菜单，这与您在上面的站点中使用的菜单基本相同，除了您可以只使用一个菜单用于大型和移动屏幕，而不是在您的网站上放置两个菜单。看看这个 fiddle 演示，它有scrollspy，就像我说的那样，它没有使用两个菜单，它只是在移动屏幕上重新设置画布菜单的样式，并在按下菜单按钮时使用 jquery 将一个类切换到.menu-open 的主体。
我不太确定您是否想要相同类型的覆盖样式的菜单，因此我将其设置为类似于您在上面链接到的网站，但如果您希望它是另一种类型的画布样式，那么您只需更改 css 以从左侧或右侧或任何位置切换它。
这里是小提琴JSFiddle Demo的链接
无论如何希望这一切都会有所帮助，如果您有任何问题，请随时在下面发表评论。
P.S 在查看您的页面源代码时，我注意到您在整个页面中都有 .container-fluid 包装 .containers。这根本不是必需的，很可能导致底部的水平滚动条。我不确定，但我只是想我会向你指出这一点。
【讨论】：