单击两次以使JS起作用

Question

为此，我需要在切换链接上单击两次。 而且无法真正看到为什么也找不到解决方案以使其在第一次点击时就可以正常工作。 有人可以解释为什么会这样吗？ 这个想法是为了显示隐藏导航栏（固定），这里是JS

    <script>
      function toggle_visibility(id) {
            var e = document.getElementById(id);
       e.style.display = ((e.style.display!='none') ? 'none' : 'block');
      }
   </script>

和HTML

<div class="nav">
  <a onclick="toggle_visibility('navbar');" style="cursor:pointer;">V</a>
  <div id="navbar" class="hidden">navigation items</div>
 </div>

还有一些CSS

.hidden {display:none;}

.hidden类的原因是将其隐藏在开始中。 我还没做好。 虽然我认为应该有可能。 ：） 提前致谢

Answer 1

好的，这就是为什么您必须单击两次的原因：

第一次单击时，默认的内联 CSS将被应用display:none因为它不是none ，而是undefined 。 下次单击测试是假的，因为它是none ，因此将内联 CSS应用于display:block 。 下一段代码将检查是否首先应用了任何样式，如果返回true，它将正常继续书写，否则将应用display:block （这样将防止您第一次运行display：none） 。

 function toggle_visibility(id) {
   var e = document.getElementById(id);
   if (e.style.display){
   e.style.display = ((e.style.display!='none') ? 'none' : 'block');
   }
   else {e.style.display='block'}
  }

Answer 2

更新资料

如何使用classList然后由于您正在使用类而进行切换

function toggle_visibility(id) {
  var e = document.getElementById(id);
  e.classList.toggle('hidden');
}

 function toggle_visibility(id) { var e = document.getElementById(id); e.classList.toggle('hidden'); } 

 .hidden {display:none;} 

 <div class="nav"> <a onclick="toggle_visibility('navbar');" style="cursor:pointer;">V</a> <div id="navbar" class="hidden">navigation items</div> </div> 

---

您应该像这样的`toggle_visibility（'navbar'）;`一样，在`toggle_visibility`方法中发送字符串“” navbar“`。

Answer 3

您可以使用javascript检查对象的CSS显示吗？

如果元素的显示是继承的或由CSS规则指定的，则需要获取其计算样式：

返回element.currentStyle？ element.currentStyle.display：getComputedStyle（element，null）.display;

格里茨

Answer 4

第一次页面加载时，该元素具有CSS样式，但是在JS中没有样式，因此您要做的就是添加display：none，仅在页面加载时才使用JS。 在页面末尾添加以下行：

document.getElementById("navbar").style.display="none";

Answer 5

我发现这是因为"hidden"或"none" css值仅在css文件中声明，而不在内联语句中声明。 因此，在您的html中，请确保声明您的初始CSS样式，例如"display:none;" inline ，这意味着将其添加到html文件中的代码中，而不依赖于javascript与css文件一起使用。 您会看到display: none的CSS display: none javascript必须首先在DOM中display: none CSS。 似乎来自CSS文件的CSS不在DOM中。 如果我错了纠正我。