使按钮立即打开菜单

Make button open menu instantly

本文关键字：打开菜单 按钮      更新时间：2023-10-21

我希望我的移动菜单在用户触摸按钮后立即打开。当offcanvas菜单可见时，我在两个按钮中都使用了ontouchstart="来在内容上创建覆盖，并且只要用户触摸其中一个按钮，这就可以工作。我希望这也能以同样的方式用于href="javascript:void（0），它可以打开菜单。以下是网站：https://londontradition.com，您可以看到，只要触摸菜单按钮，覆盖就会变为可见，但直到您将手指移开，菜单转换才会开始。感谢您的帮助。

这里有一个这样做的例子：https://www.ssense.com/

这是我的菜单关闭按钮的html：

<a href="javascript:void(0);" class="mobile-button visible-sm visible-xs" id="close-btn" ontouchstart="document.getElementById('content').style.cssText = 'opacity:1;';">Menu</a>

这是我的菜单打开按钮的html：

<div class="col-sm-3 col-xs-3"><a href="javascript:void(0);" class="mobile-button" id="menu-toggle" ontouchstart="document.getElementById('content').style.cssText = 'opacity:0.1;';">Menu</a></div>

您应该使用onmouseover事件，而不是使用ontouchstart。请查看此处以获取更多信息。此外，您应该实现一个功能，当鼠标不再通过onmouseout悬停时，将其恢复正常。

你的代码应该是这样的：

<a href="javascript:void(0);" class="mobile-button visible-sm visible-xs" id="close-btn" onmouseover="document.getElementById('content').style.cssText = 'opacity:1;';" onmouseout="document.getElementById('content').style.cssText = 'opacity:0.1;';">Menu</a>

我自己为那些也在寻找答案的人找到了一个解决方案。

我所做的是将此添加到我的菜单打开按钮中：

ontouchstart="document.getElementById('sidebar').style.cssText = 'transform: translateX(0px) !important;';document.getElementById('wrapper').style.cssText = 'transform: translateX(225px) !important;';document.getElementById('top-bar').style.cssText = 'transform: translateX(225px) !important;';document.getElementById('content').style.cssText = 'opacity:0.2;';"

这个到我的菜单关闭按钮：

ontouchstart="document.getElementById('sidebar').style.cssText = 'transform: translateX(-225px) !important;';document.getElementById('wrapper').style.cssText = 'transform: translateX(0px) !important;';document.getElementById('top-bar').style.cssText = 'transform: translateX(0px) !important;';document.getElementById('content').style.cssText = 'opacity:1;';"

一旦用户用手指触摸按钮，甚至在他们将手指移开之前，菜单就开始出现。

相关文章：