使用JavaScript或jQuery实现汉堡二级下拉菜单问题求助

问题1：关闭按钮（X）移至左侧 #

在你现有的CSS代码基础上新增如下样式即可：

/* 菜单展开状态下调整关闭按钮位置 */
#menuToggle input:checked {
  position: fixed;
  top: 25px;
  left: 20px;
}
#menuToggle input:checked ~ span {
  position: fixed;
  top: 25px;
  left: 20px;
}

你可以根据实际设计需求调整top和left的数值，匹配预期的关闭按钮位置。

问题2：子菜单无法触发 #

你当前的子菜单使用了visibility: hidden属性，该属性只会隐藏元素，不会释放元素占据的页面空间，所以子菜单即使不可见，还是浮在menu-item1上方挡住了点击事件，按以下两步修改即可：

第一步：修改子菜单CSS

将#dropdown-m的visibility: hidden替换为display: none：

#dropdown-m {
  position: absolute;
  background: #F8F8F8;
  width: 340px;
  height: 528px;
  margin: -150px 0 0 -30px;
  list-style: none;
  z-index: 5;
  /* 删掉原来的visibility: hidden，新增下面一行 */
  display: none;
}

第二步：添加JS控制子菜单切换

在页面的</body>标签前加入如下原生JS代码即可，无需引入jQuery：

const menuItem1 = document.querySelector('.list');
const subMenu = document.querySelector('#dropdown-m');
const backBtn = document.querySelector('.back');

// 点击menu-item1显示子菜单
menuItem1.addEventListener('click', e => {
  e.preventDefault();
  subMenu.style.display = 'block';
})

// 点击返回按钮收起子菜单
backBtn.addEventListener('click', e => {
  e.preventDefault();
  subMenu.style.display = 'none';
})

如果你的页面有多个.list类名的元素，可以给menu-item1对应的<ul class="list">单独设置id="menuItem1"，然后把JS里的.querySelector('.list')替换为.querySelector('#menuItem1')避免冲突。

内容的提问来源于stack exchange，提问作者Babis Patatoukos