时间戳

首页 > 解决方案 > javascript：为什么我需要单击两次才能更改显示属性？

javascript - javascript：为什么我需要单击两次才能更改显示属性？

问题描述

我有一个包含该属性的菜单display: none;和一个更改该属性的外部文件中的 javascript。

let montreMenu = function(){
  var monMenu = document.querySelector('.popupmenu')
  if (monMenu.style.display === 'none'){
    monMenu.style.display = 'flex'
  }else{
    monMenu.style.display = 'none'
  }
}
<span id="apparition_popupmenu" onclick="montreMenu()" >Click
</span>
<nav class="popupmenu">
 <span>nav Data</span>
</nav>

它可以工作，除了在页面加载时，我需要单击 spanapparition_popupmenu两次才能使切换生效。为什么是这样？

标签： javascripthtml

解决方案

因为，很可能，您display: none在css中指定，但在 js 逻辑中您指的是styles。因此，首先，在第一次单击时，您会得到display: none，而在第二次单击时，会得到display: flex。

您可以使用方法getComputedStyle()来检查 css 样式。像这样：

if (window.getComputedStyle(monMenu).display === 'none') { ... }

另外，有问题的例子：

let montreMenu = function(){
  var monMenu = document.querySelector('.popupmenu')
  if (window.getComputedStyle(monMenu).display === 'none'){
    monMenu.style.display = 'flex'
  }else{
    monMenu.style.display = 'none'
  }
}
.popupmenu {
  display: none;
}
<span id="apparition_popupmenu" onclick="montreMenu()" >Click</span>
<nav class="popupmenu">popup</nav>

根据上述评论的建议，我使用 method 提出了第二个解决方案toggle()。此方法添加/删除一个类，如开关。并且不需要通过条件检查显示器的当前状态。if只需要将活动状态的类添加到css中。像这样：

.popupmenu.active {
  display: flex;
}


let montreMenu = function(){
  var monMenu = document.querySelector('.popupmenu');
  monMenu.classList.toggle('active');
}
.popupmenu {
  display: none;
}

.popupmenu.active {
  display: flex;
}
<span id="apparition_popupmenu" onclick="montreMenu()" >Click</span>
<nav class="popupmenu">popup</nav>

推荐阅读