Подскажите, почему не срабатывает функция с условиями показать-спрятать меню

Question

Изначально меню скрыто с помощью 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";
    }
}

Answer 1

Если вы хотите узнать значение какого-то определённого свойства, вам нужно использовать 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>

БЛОГ НА HUSL

Подскажите, почему не срабатывает функция с условиями показать-спрятать меню

Ответы (1 шт):