jquery汉堡菜单有什么问题？

Question

我想这个代码打开和关闭.sidebar切换，它的工作在桌面铬浏览器(任何屏幕大小)，但它不会打开.sidebar时，burger-menu切换。

​

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键顺序显示，并由屏幕阅读器声明为可单击元素)。