javascript - jquery 汉堡菜单有什么问题？

Question

我希望此代码通过切换打开和关闭 .sidebar，它在桌面 chrome 浏览器(任何屏幕尺寸)中工作，但它不会打开 .sidebar 汉堡菜单切换。

const toggleables = document.querySelectorAll('.toggleable')

const toggleIcon = (e) => {
  console.log(e.path);
  const icon = e.path.find((el) =>  el.classList.contains('toggleable'));

  if (icon.classList.contains('toggled')) {
    icon.classList.remove('toggled');
        $(".sidebar").hide();
  } else {
    icon.classList.add('toggled');
    $(".sidebar").show();
    }

};

toggleables.forEach((toggleable) => {
  toggleable.addEventListener('click', toggleIcon);
});

.burger-menu {
  position: relative;
} .burger-menu .line-1 { top: 18px; }
  .burger-menu .line-2 { top: 32px; }
  .burger-menu .line {
    position: absolute;
    left: 27px;
    width: 22px;
    height: 1px;
    border-radius: 0;
    background-color: red;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    opacity: 1;
} .burger-menu.toggled .line-3 { opacity: 0; }
  .burger-menu.toggled .line-1 {
    -webkit-transform: translateY(5px) rotate(45deg);
    -moz-transform: translateY(5px) rotate(45deg);
    -o-transform: translateY(5px) rotate(45deg);
    transform: translateY(5px) rotate(45deg);
} .burger-menu.toggled .line-2 {
    -webkit-transform: translateY(-8px) rotate(-45deg);
    -moz-transform: translateY(-8px) rotate(-45deg);
    -o-transform: translateY(-8px) rotate(-45deg);
    transform: translateY(-8px) rotate(-45deg);
}
.sidebar {
display:none;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <div class="menu" title="menu">
  <div class="burger-menu toggleable ">
    <span class="line line-1"></span>
    <span class="line line-2"></span>
    </div>
  </div>


 <div class="sidebar">
  <ul style="list-style:none;">
  <li>Opened</li>
  </ul>
</div>

Answer 1

<div class="burger-menu toggleable ">有height: auto (默认)并且正常流中没有内容(它的所有子项都是绝对定位的)。

这使得它的计算高度为 0 ，它提供了零个像素，您可以点击这些像素来触发点击事件。

给它一个高度。

此外，将其替换为 <button>元素(将按 Tab 键顺序显示并由屏幕阅读器宣布为可点击元素)。