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

【问题标题】：Mobile Menu button takes top of the page移动菜单按钮位于页面顶部
【发布时间】：2016-09-09 18:04:15
【问题描述】：

我有一个 wordpress 网站，我使用了一个模板来完成它。因此，当我在移动设备上时，它有一个移动菜单，当我向下滚动时，我设法将其固定在顶部，但问题是。当我在站点的某个位置并且我想用“三行”图标打开菜单时，它会打开菜单，但也会将我带到页面顶部。当我想用 X 按钮关闭菜单时，它也会将我带到页面顶部，所以基本上菜单是不可用的。我知道这是一个 Jquery 问题，但我找不到哪个文件包含它的代码，甚至找不到如何修复它。

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

所以我想让打开菜单按钮和关闭菜单按钮只打开和关闭菜单，而不是将我带到页面顶部。

【问题讨论】：

问题可能是菜单链接上的href="#"。为防止这种情况，您可以向该链接添加事件处理程序并执行event.prevetnDefault()
@empiric 我在 safari 上，它总是把我带到页面顶部
@empiric 是对的，因为他打错了字。它是 event.preventDefault()。当然，您也可以完全删除 href。
@empiric 谢谢，如果你把它作为答案，我会接受它：)

标签： javascript jquery html wordpress

【解决方案1】：

你可以使用：

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

作为记录，您不应该完全删除 href，它应该始终存在以防止意外行为。如果您不希望对 href 执行操作，那么只需使用 preventDefault() 方法即可，轻松并保持一切顺利运行。

【讨论】：

【解决方案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。

【讨论】：