Question

我希望用户触摸按钮后立即打开手机菜单。我用过ontouchstart =＆＃34;＆＃34;在两个按钮中，当offcanvas菜单可见时，在内容上创建叠加，并且只要用户触摸任一按钮，这就会起作用。我希望这对href =＆＃34; 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>

Answer 1

您应该使用ontouchstart事件，而不是使用onmouseover。有关详细信息，请查看here。此外，你应该实现一个函数，当鼠标不再通过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>

Answer 2

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

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

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;';"

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

立即按下按钮打开菜单

2 个答案: