主页 / 问题 / 1122746
Accepted
AleksandrM
Asked:2020-05-09 16:09:00 +0000 UTC2020-05-09 16:09:00 +0000 UTC

告诉我为什么带有显示-隐藏菜单条件的功能不起作用

  • 772

最初，使用 display: none 隐藏菜单（触发该功能时，我通过 js 更改样式）。该函数在加载时触发一次，当我单击菜单汉堡时，列表打开，当我想关闭它并再次单击菜单汉堡时，列表不会关闭。

let burgerMenu = document.querySelector(".burgerMenu"); // Это стилизованный блок с тремя горизонтальными линиями (бургер меню) по которому происходит клик.
let menu = document.querySelector(".menu"); // Это список ul? который должен выпадать и сворачиваться. 
burgerMenu.onclick = () => {
    if (menu.style.display = "none") {
        menu.style.display = "block";
    } else if (menu.style.display = "none") {
        menu.style.display = "none";
    }
}
javascript

1 个回答

  1. Best Answer

    如果您想知道特定属性的值，您需要使用getComputedStyle，请参阅：

    const elem = document.body; /* элемент, у которого хотите получить стили */
const styles = window.getComputedStyle(elem, false); /* все стили */
const margin = styles.getPropertyValue('margin'); /* margin стили */
console.log(margin);


    hidden如果你只是这样做 可以使用display: none / что-то ещё

    const el = document.querySelector('#navbar_nav');
const btn_toggle = document.querySelector('#btn_toggle');
btn_toggle.addEventListener('click', function() {
  el.hidden = !el.hidden;
});
    [hidden] {
  display: none !important;
}

#navbar_nav {
  display: flex;
  list-style: none;
}

#navbar_nav li {
  padding: .25em;
}
    <nav>
  <button id="btn_toggle">
    <span></span>
    <span>&nbsp;</span>
    <span></span>
  </button>

  <ul id="navbar_nav" hidden>
    <li>home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
  </ul>
</nav>

    您还可以添加/删除一个类active

    const el = document.querySelector('#navbar_nav');
const btn_toggle = document.querySelector('#btn_toggle');
btn_toggle.addEventListener('click', function() {
  el.classList.toggle('active');
})
    #navbar_nav {
  display: flex;
  list-style: none;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s visibility ease-in-out, 0.3s opacity ease-in-out;
}

#navbar_nav.active {
  opacity: 1;
  visibility: visible;
}

#navbar_nav li {
  padding: .25em;
}
    <nav>
  <button id="btn_toggle">
    <span></span>
    <span>&nbsp;</span>
    <span></span>
  </button>

  <ul id="navbar_nav">
    <li>home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
  </ul>
</nav>

    • 1

相关问题