Question

我希望此代码通过切换来打开和关闭.sidebar，它可以在台式机Chrome浏览器（任何屏幕尺寸）中使用，但是在切换.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>元素（将以制表符顺序显示，并被屏幕阅读器宣布为可点击元素）。

jQuery Burger菜单有什么问题？

1 个答案: