Question

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

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

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

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

Answer 1

所以我认为我会对此提出异议并提供一些解决方案。如果您只是想要关闭当前有人点击菜单中的链接时所具有的菜单，您可以非常简单地使用点击功能点击您在那里的菜单按钮：

$_SESSION

或者您可以从复选框中删除选中的内容，如下所示：

{$smarty.session.MY_SESSION_VALUE} //Everything in $_SESSION is available.

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

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

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

然后你可以使用已经存在的滚动脚本，一切都应该按照你想要的那样工作。

或者

我在您的网站上看到您已经在使用bootstrap。 Bootstrap有一个内置的插件，称为scrollspy，处理一个页面设计，允许您滚动到那种性质的部分和事物。使用它而不是你现有的脚本可能会更小一些，并且会更好地为你服务，因为它也会处理你的导航栏中的活动类。对于您试图通过您的网站实现的目标可能会好得多。

另外在底部，我已经放置了一个jsfiddle演示的链接，该演示使用了scrollspy和一个非画布菜单，这与您在上面的网站中使用的内容基本相同，除了你可以只使用一个菜单移动屏幕，而不是在您的网站上放置两个菜单。看看这个小提琴演示，它有滚动到位，就像我说的，而不是使用两个菜单，它只是重新设置移动屏幕上的画布菜单，并使用jquery切换一个类到$('.navbar-collapse li a').on('click', function(){ $('input.checkbox-toggle').prop('checked', false); });的主体，当菜单按钮是按压。

我不太确定你是否想要相同类型的叠加菜单，所以我把它与你上面链接的网站类似，但如果你想要它是一种不同类型的画布风格然后你可以改变css来从左边或右边或任何地方切换它。

以下是小提琴JSFiddle Demo

的链接

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

P.S我注意到你的页面来源，你的页面中有.container-fluid包装.containers。这根本不是必需的，很可能导致底部的水平滚动条。我不确定，但我想我会指出这一点。

单击菜单项时关闭画布外导航

1 个答案: