如果显示属性位于标题中，则JavaScript切换按钮仅适用于第二次单击

Question

我遇到了一个有趣的怪癖，想知道是否有人能帮助我理解它。如果切换元素的display:none包含在内，则如下所示，简单的JavaScript驱动切换按钮可以很好地工作。但是，当我将CSS语句移动到标题中的<style>标记或单独的CSS文件时，它仅在第二次单击时开始切换，从那时起，它在单个上运行正常点击每次切换。这是JS函数：

<script>
    function openSec(ordinal) {
        var tab_name = "sec" + ordinal;
        if (document.getElementById(tab_name).style.display == "none") {
            document.getElementById(tab_name).style.display = "table";
        } else {
            document.getElementById(tab_name).style.display = "none";
        }
    }
</script>

Answer 1

当CSS语句在样式标记中时，它不再作为被单击的DOM元素的属性存在。浏览器仍在应用样式，但DOM元素不再具有该值作为样式属性。所以第一次点击，没有显示：无，所以它添加它，然后在第二次点击它用表替换它。

使用浏览器的开发工具（或Firebug之类的东西）来检查初始HTML，然后在第一次点击后再次检查它，我认为你会看到差异。