0

我希望我的移动菜单在用户触摸按钮后立即打开。当 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>
4

2 回答 2

0

而不是使用ontouchstart，你应该使用onmouseover事件。在这里查看更多信息。此外，当鼠标不再悬停时，您应该实现一个功能以将其设置回正常状态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>
于 2016-04-01T11:28:12.913 回答
0

我自己为任何也在寻找答案的人找到了解决方案。

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

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

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

于 2016-04-02T14:05:56.630 回答