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。下次单击测试时为false，因为它是none，因此内联 CSS将被应用display:block。下一段代码将检查是否首先应用了任何样式，如果它返回true，它将正常继续你的脚本，否则它将应用display:block（这样它将阻止你第一次运行应用显示：无）。

 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

Can you check an object's CSS display with javascript?

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

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

格尔茨

Answer 4

第一次加载元素时，该元素具有CSS样式，但它在JS中没有样式，因此您只需在页面加载时使用JS添加display：none即可。在页面末尾添加此行：

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

Answer 5

我发现这是因为"hidden"或"none" css值仅在css文件中声明，而不是在内联语句中声明。所以在你的html中，一定要声明你的初始css风格，例如： "display:none;" inline，这意味着将其添加到html文件中的代码中，而不是依赖于使用css文件的javascript。您会看到display: none的css必须首先在DOM中才能操作javascript。似乎来自css文件的css不在DOM中。如我错了请纠正我。

单击两次以使js运行

5 个答案:

更新