Question

HTML

    <a data-info-id="info1" onclick="toggleLink();" href="#">Click here for more     information</a>
   <div id="info1" border="0">
    More information here
    </div>

CSS

    #info1 {
    display:none;
 }

JS

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

问题

当CSS是外部的而不是内联时，它要求您在正确显示并隐藏info1 DIV之前最初单击链接两次。

解决方案是将样式设为内联，但为什么？

    <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>

我想将它与下面的CSS一起使用，然后使用id = info1，id = info2 .... id = info20的监听器创建一个数组。

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

}

Link to Fiddle

Answer 1

试试这个：

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

而不是：

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

小提琴：http://jsfiddle.net/Wfxpu/85/

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

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

1 个答案: