Javascript 除非内联定义了样式，否则在链接上显示/隐藏切换需要单击两次

HTML

JS

问题

当CSS是外部的而不是内联的时，它要求您首先单击链接两次，然后才能正确显示和隐藏info1 DIV

解决方案是使样式内联，但为什么

        function toggleLink()
    {
         var elem=document.getElementById("info1");
         var hide = elem.style.display =="none";
         if (hide) {
             elem.style.display="block";
        } 
        else {
           elem.style.display="none";
        }
    }

}

试试这个：

    [id^="info"]  { /* gets all elements where id starting with info */
    display: none;

而不是：

var hide = window.getComputedStyle(elem, null).display =="none";

小提琴：

---

编辑（解释）：这是因为它检查计算样式，其中包括由类或样式表中设置的任何样式以及内联样式。您最初只在内联样式标记中检查样式的内容，当您使用样式表中的类/样式时，该标记不存在（在您的情况下，您的代码在第二次单击后工作，因为单击后添加了内联样式）。希望有帮助

为什么不能尝试简单的jquery切换功能

$（“#info1”）.toggle（）？OP没有指定正在使用jquery。谢谢，现在我必须找出为什么会这样。
    <a data-info-id="info1" onclick="toggleLink();" href="#">Click here for more </a>       
<div id="info1" border="0" style="display:none";>
More information here
</div>

    [id^="info"]  { /* gets all elements where id starting with info */
    display: none;

var hide = window.getComputedStyle(elem, null).display =="none";

var hide = elem.style.display =="none";