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

Question

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

为了更好地理解，我上传了两个网站，如果可能，请在您的 phone 上查看它们：

一个空白页上有免费菜单
http://armandorodriguez.pe/menu
jsfiddle.net/xj82ugwz/
还有一个菜单在 div
http://armandorodriguez.pe/info
jsfiddle.net/2p66rvz9/

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

谢谢。

Answer 1

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

li 项下 class submenu 更改

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

一点javascript就能解决你的下一个问题。您检测用户是否正在使用移动设备，如果是，则将 href 属性设置为 #。否则，您将删除 href 属性。给投资组合 link 一个 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");
}

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

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

Responsive dropdown menu is reloading my page

html

javascript

css

jquery

drop-down-menu