移动下拉菜单无法关闭javascript

我想在我的手机网站上有一份汉堡包菜单

在移动设备上查看时，菜单会在单击时打开，但在菜单打开后不会在单击时折叠-这是我的问题

这是我的问题的基本HTML

我正在使用magento 1.9.2.3

php代码是“toplinks”。这些不需要工作来解决这个问题

HTML

任何帮助都将不胜感激

首先谢谢你

   <div class="dropdown">
      <onclick="myFunction()" class="dropbtn">

或者在不同的用户界面元素上。其次,

document.getElementById("myDropdown").classList.toggle("show");

应改为,

document.getElementById("myDropdown").classList.toggle();

将

myDropdown

的初始状态设置为

hide（）

。比如说,

  $(document).ready(function() {
      $('#myDropdown').hide();
  }

---

这将指定一个元素，以便在加载页面后执行操作。您可以通过提供

none

的

display

属性，并设置触发器将

display

属性更改为

上的
block
单击
或
悬停
，来完全使用
css
进行设置。希望这有助于你在这个经过改编的活生生的例子中：这是你想要达到的行为吗


/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
功能myFunction（ev）{
document.getElementById（“下拉”）.classList.toggle（“显示”）；
}
//如果用户在下拉菜单外单击，请关闭下拉菜单
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

。移动链接。下拉列表{
位置：相对位置；
显示：内联块；
填充：2x13px 0px；
}
.移动链接.下拉式内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
填充物：5px12px；
z指数：1；
}
#下拉：悬停。下拉内容，
#dropdown.show.dropdown内容{
显示：块；
}

内容
您使用的是
document.getElementById（“myDropdown”）
-但是没有id为“myDropdown”的元素。另外，您定义了一个“onclick”元素，它不是有效的HTML-它应该是一个具有onclick属性的按钮元素，因此
另外，
.classList.collapse（）
不是一个有效的方法。难道“myDropdown”不是带有onclick“myFunction”的类“dropdown”的结果，所以它会变成“myDropdown”吗在你的代码中，魔法应该发生在哪里因为目前，您只是从DOM中选择了一个id为“myDropdown”的元素，但没有具有该id的元素。此外，更改代码后，您现在有了一个
class
元素，并且错过了
class=“dropdown”上的
onclick
属性的结束双引号
element。感谢您的回复。我调整了原始帖子中的代码，以反映您所说要更改的内容。如何将myDropdown上的初始状态设置为hide（）？我是java新手，因此我正在尽可能多地阅读。@L.Blanchard请不要将JavaScript与java混淆。我将用一个设置初始状态的示例进行编辑。非常感谢您的帮助。你的按钮在这里很好用。当我更改代码时，菜单会打开，但在手机上再次单击时仍不会关闭。悬停可能与此有关吗？我只需要菜单打开和关闭一个移动设备上的点击，然后你可以完全删除悬停和从样式！
 <div class="dropdown" onClick="myFunction()">

document.getElementById("myDropdown").classList.toggle("show");

document.getElementById("myDropdown").classList.toggle();

  $(document).ready(function() {
      $('#myDropdown').hide();
  }