javascript - 响应式下拉菜单正在重新加载我的页面

Question

如果有人正在阅读本文，请提供帮助。我有一个用教程创建的响应式菜单，它使用 css 和 javascript 中的代码(我什么都不知道，我只是复制/粘贴)，并且工作正常。当我将这个菜单插入到我网站的一个 div 中时，问题就开始了。桌面版仍然可以正常工作，但移动版是另一回事。该按钮会调用下拉菜单，但当我按下元素按钮时，它会重新加载页面并且从不显示元素。

为了更好的理解，我上传了两个网站，如果可能请在手机上查看:

• 一张空白页面上有免费菜单
  http://armandorodriguez.pe/menu
  jsfiddle.net/xj82ugwz/

• 还有一个在 div 中包含菜单
  http://armandorodriguez.pe/info
  jsfiddle.net/2p66rvz9/

现在您可以看到第二个链接中的菜单位于名为“header-menu”的 div 中，而该 div 位于另一个名为“header”的 div 中，这就是它在我的页面中应有的样子。出了什么问题，我该如何解决？？

谢谢。

Answer 1

您的投资组合中有一个空的 href属性，将其更改为 # .

在li下类 submenu 的元素改变

<a href="">至 <a href="#"> .

---

一点 javascript 就可以解决您的下一个问题。您检测用户是否正在使用移动设备，如果是，则设置 href属性为 # .否则你删除 href属性。给投资组合链接 id让事情变得更容易。

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    document.getElementById("YOUR ID").href = "#";
}
else {
    document.getElementById("YOUR ID").removeAttribute("href");
}

这应该可以解决您所有的问题。