主页 / 问题 / 1582330
Accepted
Terra
Asked:2024-05-31 23:47:41 +0000 UTC2024-05-31 23:47:41 +0000 UTC

如何取消js中的函数，使li_btn再次消失，并且在不重新加载页面的情况下重复此操作

  • 772

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条条纹的按钮，就会出现导航菜单。

如何让再次按下菜单时菜单再次消失？

javascript

1 个回答

  1. Best Answer

    单击时，检查元素显示样式的当前值并根据需要进行更改

    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>

    • 1

相关问题