关闭关闭帆布导航时菜单项点击

Question

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

有几件事情，我想在这里完成：

1. 当您单击除了菜单项的任何地方它会关闭导航
2. 当您点击一个菜单项，它会关闭导航栏并将动画添加到ID

画布外导航仅显示在其移动视图中。如果您在桌面上查看网站，导航会将您的动画制作为特定的ID，所以我在那里有一些我猜测可以用于非画布的js。我读过一些文章，说使用数据切换，但我无法让它工作。

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); 
}); 

你可能想，如果语句添加的，因此只发生在手机屏幕尺寸，以便像下面这样：

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

反之亦然，点击功能也可以切换点击。

然后你可以使用你已经有的滚动脚本，并且所有的东西都应该按照你想要的那样工作。

或者

我看到你已经在使用引导您的网站。 Bootstrap有一个内置的插件，它被称为scrollspy，可处理一个页面设计，让您可以滚动到各种部分和该类型的内容。使用此代替脚本可能会更简单一些，并且会更好地为您提供服务，因为它将处理替换导航栏中的活动类。对于您试图通过您的网站实现的目标可能会更好。

另外在底部，我已经放置了一个jsfiddle演示的链接，该演示使用scrollspy以及与您在上面的站点中使用的基本相同的画布菜单，除了您可以只使用一个菜单和移动屏幕，而不是在您的网站上放置两个菜单。看看这个小提琴演示，它有滚动的地方，就像我说的，而不是使用两个菜单，它只是在手机屏幕上重新设置了画布菜单，并使用jquery在按下菜单按钮时将类切换到主体.menu-open。

我不太确定你是否想要相同类型的叠加样式的菜单，所以我将它与上面链接的网站做了类似，但是如果你希望它是不同类型的非帆布样式，那么你可以改变CSS来从左边或右边或任何地方切换。

这里是小提琴JSFiddle Demo

链接无论如何希望这一切都有助于如果您有任何疑问，请随时在下面评论。

P.S我注意到当你看到你的页面源时，你有.container流体包装.containers整个页面。这根本不是必须的，而且很可能导致底部的水平滚动条。我不确定，但我只是想我会指出这一点给你。