在2018年使用普通JavaScript创建下拉菜单/下拉菜单（ES 6/7？）

Question

对于响应式导航菜单，我具有以下前端代码。

代码

media screen and (max-width: 767px) {
  .burger {
    display: block
  }
  .menu {
    display: none
  }
}

media screen and (min-width: 768px) {
  .burger {
    display: none
  }
  .menu {
    display: block
  }
}

<div class="burger">BARS</div>

<ul class="menu">
  <li>Homepage</li>
  <li>Contact_us</li>
</ul>

我的愿望

我希望点击汉堡元素（出现在手机和平​​板电脑上）会分别在下拉菜单或下拉菜单中使menu元素出现或消失，但不会出现断点冲突。

对我来说，“刹车点冲突”是从台式机冲浪时，我们将Xpx>=968px浏览器窗口的大小调整为Xpx<=967px，然后将大小调整为Xpx>=968px，菜单保持打开状态并滚动汉堡不会消除它（不会将display改回none）。

我的问题

在2018年（ES6 / 7）的香草JavaScript中是否有任何模式（可能带有专用的method）来制作onclick下拉/下拉菜单？

Answer 1

您可以执行此操作，它不是JS，但可以运行：p

我删除了media screen，任何人都可以在更大的屏幕上进行测试

这里是a code pen的this site，提供了更完整的答案

#burger {
  visibility: hidden;
}

.menu {
  display: none;
}

#burger:checked + .menu {
  display: block;
}

<div>
    <label for="burger">Bars</label>
    <input type="checkbox" id="burger">
    <ul class="menu">
      <li>Homepage</li>
      <li>Contact_us</li>
    </ul>
</div>

可能需要在标签上添加装饰，以表明用户可以单击此文本