Как в js сделать отмену функции, что бы li_btn опять скрылся и это повторялось без перезагрузки страницы

Question

var btn = document.querySelector('.btn');
var li_btn = document.querySelector('.li_btn');

btn.addEventListener('click', function() {
  li_btn.style.display = 'inline-flex'
});

<nav class="menu_links">
  <div class="sun">
    <i class="fa-sharp fa-solid fa-sun"></i>
  </div>
  <ul class="li_btn">
    <li><a href="#">главная</a></li>
    <li><a href="#">практика js</a></li>
  </ul>
  <div class="btn">
    <i class="fa-solid fa-bars"></i>
  </div>
</nav>

На этой картинке выполнен уже написанный код, то есть нажимаем на кнопку с 3 полосками и появляется меню навигации.

Как сделать чтобы при повторном нажатие меню опять пропадало?

Answer 1

При клике проверяйте текущее значение стиля display элемента и меняйте по желанию

const btn = document.querySelector('.btn');
const li_btn = document.querySelector('.li_btn');

btn.addEventListener('click', function() {
  if (li_btn.style.display === 'inline-flex') {
    li_btn.style.display = 'none'
  } else {
    li_btn.style.display = 'inline-flex'
  }
});

.li_btn {
  display: none
}

<nav class="menu_links">
  <div class="sun">
    <i class="fa-sharp fa-solid fa-sun"></i>Солнышко
  </div>
  <ul class="li_btn">
    <li><a href="#">главная</a></li>
    <li><a href="#">практика js</a></li>
  </ul>
  <div class="btn">
    <i class="fa-solid fa-bars"></i>Бутерброд
  </div>
</nav>

БЛОГ НА HUSL

Как в js сделать отмену функции, что бы li_btn опять скрылся и это повторялось без перезагрузки страницы

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