Question

以下代码是一个链接，点击后会打开＆amp;关闭最初隐藏的div。除了必须在第一个实例中单击链接两次以打开它之外，它工作正常。这不是一个主要的问题，但是如果它可以在第一次点击时打开div就会很棒。感谢

toggleDiv.js

function toggleDiv(elem, eventType, handler) {
    if (elem.addEventListener) {
        elem.addEventListener(eventType, handler, false);
    } else {
        elem.attachEvent('on' + eventType, handler);
    }
}

toggleDiv(window, 'load', function() {
    var link = document.getElementById('myMagicLink'),
        div = document.getElementById('foo');
    toggleDiv(link, 'click', function() {
        if (!link) return true;
        if (div.style.display == "none") {
            div.style.display = "block"
        } else {
            div.style.display = "none"
        }
        return true;
    });
});

的index.html

<body>
<a id="myMagicLink" href="http://www.google.com/">My Magic Link</a>
<div id="foo">Opens a div</div>
<br>
End of page
<br>
<script language="JavaScript" type="text/javascript" src="toggleDiv.js"></script>
</body>

Answer 1

我在切换ASIDE标签的显示值方面遇到了同样的问题。从“无”切换到“内联”并再次返回在第一次单击时不起作用。我的CSS文件中的显示设置为“无”。在我的脚本中，我将“none”改为“”（据我所知，这似乎意味着“默认”）。以下代码现在可以正常使用。

    var x = document.getElementsByTagName("aside")[0];
if (x.style.display == "")
{
    x.style.display = "inline"; 
}
else
{
    x.style.display = "";   
}

当我在Firefox开发人员工具中看到CSS /实际值时，我明白了这一点：使用CSS属性显示“aside”，但首先显示没有属性的“element”。在第一次单击时，“元素”被指定为“显示”属性设置为“无”。

Answer 2

不确定你遇到了什么麻烦...这对我来说在Chrome中完美无缺。

我确实更改了链接的网址以反映回同一文档，但div foo正在隐藏并重新出现。

多种风格注释：不要设置display = "block"，最好说display = ""，以便它可以返回默认值。

另外，我还包含了一个preventDefault函数。您对return true的使用适用于DOM0样式事件处理，但它不适用于attachEvent/addEventHandler代码。这样可以防止链接被跟踪。

<html>
<head>
<title>Test</title>
<script>
function toggleDiv(elem, eventType, handler) {
    if (elem.addEventListener) {
        elem.addEventListener(eventType, handler, false);
    } else {
        elem.attachEvent('on' + eventType, handler);
    }
}


toggleDiv(window, 'load', function() {
    var link = document.getElementById('myMagicLink'),
        div = document.getElementById('foo');
    toggleDiv(link, 'click', function(e) {
        if (!link) return cancelDefaultAction(e);

        if (div.style.display == "none") {
            div.style.display = "block"
        } else {
            div.style.display = "none"
        }       
        return cancelDefaultAction(e);
    });
});

function cancelDefaultAction(e) {
 var evt = e ? e:window.event;
 if (evt.preventDefault) evt.preventDefault();
 evt.returnValue = false;
 return false;
}   

</script>


<body>
<a id="myMagicLink" href="#">My Magic Link</a>
<div id="foo">Opens a div</div>
<br>
End of page
<br>

</body>
</html>

Answer 3

对不起，对于非常简单的事情来说似乎有点复杂，除非你有一个特定的设计;但这应该同样有效：

The Fiddle

<html>
<head>
    <script language="JavaScript" type="text/javascript">

    var toggled = false;
    function toggleDiv()
        {
           if(toggled)
             {
               document.getElementById('foo').style.display = '';
               toggled = false;            
             }       
           else
           {
               document.getElementById('foo').style.display = 'none';
               toggled = true;
           }
        }
    </script>
    </head>
<body>
<a id="myMagicLink" href="http://www.google.com/" onClick='toggleDiv()'>My Magic Link</a>
<div id="foo">Opens a div</div>
<br>
End of page
<br>
</body>
</html>

javascript onclick事件在第一次点击时不会触发

3 个答案: