Question

在尝试使用Javascript进行基本折叠div时，我遇到了以下奇怪的错误;使用此代码：

<html> 
    <head> 
        <style type="text/css">
            .hidden
            {
                display: none;
            }
        </style>
        <script type="text/javascript">
            function toggle()
            {
                var element = document.getElementById('hidden1');
                if(element.style.display === 'none')
                {
                    element.style.display = 'inline';
                }
                else
                {
                    element.style.display = 'none';
                }
            }
        </script> 
    </head> 
    <body>
        <a onclick="toggle()">Click me</a><br /> 
        <div id="hidden1" class="hidden">
            stuffs
        </div>
    </body>
</html>

我原本期望它能够正常工作：div会开始隐藏，每次点击它都会从可见变为不可见，但不会：它需要2次点击才能显示元素第一次，经过一些调试，我意识到div似乎在一些奇怪的量子通量中。将以下警报添加到toggle()方法的顶部时：

alert('\'' + document.getElementById('hidden1').style.display + '\'');

我给了''，这意味着它是空的。但是当我在完全相同的地方这样做时：

console.log(document.getElementById('hidden1').style);

然后控制台显示：

[object CSS2Properties]

具有以下属性：

0: "display"
...
display: "none"

但是，当.hidden的CSS声明内联移动到div的{{1}}时，代码的工作方式与预期完全一致。有谁知道为什么会这样？

我也想知道是否有人无法重现这个问题，因为我已经在Centos和Windows上使用apache，以及使用Firefox 24，Chrome 30和最新的Opera浏览器体验过它。

Answer 1

这是CSS中的C（级联）。您正在检查该元素是否直接将display属性设置为none。加载页面时，它不会。当你第一次点击它时，它会检查它是否是自己的style.display是none，但它是undefined;所以它根据你的if / else分配"none"。

现在，当您再次点击它时，style.display设置为"none"，然后将其更改为"inline"。该元素仍然具有设置为.hidden的类display: none，但由于CSS继承属性的方式，元素的设置更有价值。

有两种方法可以解决您的问题。您可以像这样添加display none inline

<div id="hidden1" style="display:none">

或者你可以让你的if else检查一个未定义的值，它等于'none'就像这样

// In function toggle()
 if(!element.style.display || element.style.display === 'none')

首先检查空字符串或未定义的值，并检查它是否设置为无。

你实际上可以做到这两点，但如果可能的话，最好不要使用内联样式。

Answer 2

问题在于您以两种不同的方式设置样式。您已将一个类hidden添加到隐藏它的div中，但您还要使用Javascript手动设置CSS属性。这两个冲突，造成了奇怪的量子＆＃34;你看到的行为。

我建议使用jQuery切换可见性（您可以执行此操作with a single function），或者，如果您不想使用jQuery，请按照第一个回答here中的说明进行操作。< / p>

Answer 3

.css样式和内嵌/ javascript样式显然生活在不同的维度。这真的很奇怪。

基本上，javascript中的style.display只知道你设置的值，而不是你的.css文件设置的值。

这是一个快速解决方法：http://jsfiddle.net/qy3w8/

if (element.style.display == "") {
    element.style.display = "none";
}

刚刚在if语句的基础上添加了if语句。或者你可以使用jQuery，或者工作正常。

Answer 4

另一种选择是删除样式.hidden，并在文档加载时调用函数toggle（）。

CSS / Javascript：为什么忽略此声明？

4 个答案: