Question

我为我的网站标题制作了一个隐藏/显示按钮，但我有这个“问题”。如果用户第一次加载我的网站，或者刷新后，此按钮需要单击两次才能工作。但这是第一次。然后它正常工作！知道为什么会这样吗？

以下评论的实例。提前谢谢!!!

Answer 1

js代码是：

function display_news(){
var sheader_1 = document.getElementById("sheader_a");
var sheader_2 = document.getElementById("sheader_b");
if (sheader_1.style.display == 'block')
     sheader_1.style.display  = 'none', 
     sheader_2.style.display  = 'block';
else  sheader_1.style.display  = 'block', 
     sheader_2.style.display  = 'none';
     ;}

如果您在第一次加载页面时提醒sheader_1的值，则结果是一个空字符串，因此您的代码将不会执行任何操作（它将跳转到else语句）。

使其发挥作用的一种方法是：

function display_news(){
var sheader_1 = document.getElementById("sheader_a");
var sheader_2 = document.getElementById("sheader_b");
//here we also check if display property is empty
if (sheader_1.style.display == 'block' || sheader_1.style.display == '') 
     sheader_1.style.display  = 'none', 
     sheader_2.style.display  = 'block';
else  sheader_1.style.display  = 'block', 
     sheader_2.style.display  = 'none';
     ;}

Answer 2

 function display_header(){
 var sheader_1 = document.getElementById("sheader_a");
 var sheader_2 = document.getElementById("sheader_b");

   if (sheader_1.style.display == 'block' || sheader_1.style.display=='')
      {
         sheader_1.style.display  = 'none';
           sheader_2.style.display  = 'block';
      }
   else  {
     sheader_1.style.display  = 'block'; 
     sheader_2.style.display  = 'none';
        }
     }

WORKING FIDDLE DEMO

Answer 3

window.getComputedStyle(sheader_1).display

您需要获取元素的计算样式。否则这个条件if (sheader_1.style.display == 'block')将不起作用，因为显示将为空。

在Internet Explorer中，计算样式的方法是：element.currentStyle。

我建议在这种情况下使用jQuery。

Answer 4

页面加载时，sheader_1的显示不是阻止，而是空字符串。

因此，您可以将条件更改为：

if (sheader_1.style.display != 'none')

OnClick操作不会立即生效，但仅适用于第一次加载。包含实例。

4 个答案: