Question

我有一个wordpress网站，我用一个模板来做。因此，当我在移动设备上时，它有一个移动菜单，我设法将其固定在我向下滚动时保持在顶部，但问题是。当我在网站的某个地方时，我想用＆＃34;三行＆＃34;打开菜单。 icon它打开菜单，但也将我带到页面顶部。当我想用X按钮关闭菜单时，它也会将我带到页面顶部，所以基本上菜单无法使用。我知道这是一个Jquery问题，但是我无法找到包含代码的文件，甚至是如何修复它。

我的网站是：www.autoberles-szombathely.hu

所以我想打开菜单按钮并关闭菜单按钮，只打开和关闭菜单，不要把我带到页面顶部。

Answer 1

你可以使用：

$(selector).click(function(event) {
    event.preventDefault();
    //other stuff you might want to do on event
});

对于记录，您不应该完全删除href，它应该始终存在以防止意外行为。如果你不想对href采取行动，那么只需使用那个preventDefault（）方法，就可以轻松地保持一切顺利运行。

Answer 2

您的菜单在移动视口中具有以下结构：

<a href="#" class="menu-toggle btn ripple-effect btn-theme-transparent"><i class="fa fa-bars"></i></a>

#会导致页面跳转到顶部，请参阅here了解详细解答原因。

你有两种可能来阻止这种行为：

向此链接添加事件处理程序并使用event.preventDefault()

对于jQuery

$('.menu-toggle').on('click', function(event){ 
     event.preventDefault();
});

VanillaJs

document.getElementsByClassname('menu-toggle').addEventListener('click', function(event){
    event.preventDefault()
});

完全删除属性href（请参阅here）。使用此解决方案时，您必须使用css-reset或添加例如cursor:pointer再次对这些链接，因为标准浏览器css不再适用。

移动菜单按钮位于页面顶部

2 个答案: