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

Question

我遇到了一个有趣的怪癖，想知道是否有人可以帮助我理解它。一个简单的 JavaScript 驱动的切换按钮，如下所示，如果 display:none切换元素包含在行中。但是，当我将 CSS 语句移动到 <style> 时 header 中的标记，或单独的 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，然后在第一次点击后再次检查它，我想您会发现不同之处。