1

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

<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 + '\'');

I'm given ''，意思是它是空的。但是，当我在完全相同的地方执行此操作时：

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

然后控制台显示：

[object CSS2Properties]

具有以下属性：

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

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

我还想知道是否有人无法重现该问题，因为我在 Centos 和 Windows 上的 apache 以及 Firefox 24、Chrome 30 和最新的 Opera 浏览器上都经历过。

4

4 回答 4

7

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

现在，当您再次单击它时，它确实已style.display设置为"none"，因此随后将其更改为"inline"。该元素仍然具有.hidden设置为 have的类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')

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

您实际上可以同时执行这两种操作，但如果可能的话，最好不要内联样式。

于 2013-10-18T18:33:27.963 回答
0

问题是您以两种不同的方式设置样式。您已将一个类 , 添加hidden到隐藏它的 div 中，但您还使用 Javascript 手动设置 CSS 属性。两者冲突，导致您看到的奇怪的“量子”行为。

我建议使用 jQuery 来切换可见性（您可以使用单个函数执行此操作），或者，如果您不想使用 jQuery，请按照此处第一个答案中的说明进行操作。

于 2013-10-18T18:28:37.590 回答
0

.css 样式和 in-line/javascript 样式显然存在于不同的维度。这真的很奇怪。

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

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

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

刚刚在 if 语句之上添加了 if 语句。或者你可以使用 jQuery，要么工作正常。

于 2013-10-18T18:33:07.823 回答
0

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

于 2013-10-18T18:49:55.870 回答