Question

不知道问题出在哪里，尝试了各种各样的事情，我没有运气。我以前成功地完成了这项工作，但现在它不起作用，任何帮助都会很棒......

HTML片段：

<tr>
    <td class="tableContent noBorderSides paddingAll"><img class="imgResize" src="images/emptyCircle.png" onclick="expandItem()"/>

<div id="Expand" class="hiddenDiv">

HELLO?

</div>

JavaScript的：

function expandItem() {

if (document.getElementById("Expand").style.display == 'block') {
    document.getElementById("Expand").style.display = 'none';

}
else if (document.getElementById("Expand").style.display == 'none') {
    document.getElementById("Expand").style.display = 'block';

}
}

CSS：

.hiddenDiv {
display: none;
}

我做错了什么？

Answer 1

无法从display媒体资源中找到您在CSS中设置的初始.style。

这样做：

function expandItem() {
    var expand = document.getElementById("Expand");
    if (expand.style.display == '') {
        expand.style.display = 'block';
    }
    else if (expand.style.display == 'block') {
        expand.style.display = '';
    }
}

或者像这样短一点：

function expandItem() {
    var expand = document.getElementById("Expand");
    expand.style.display = (expand.style.display == '') ? 'none' : '';
}

Answer 2

使用.getComputedStyle()获取与给定元素关联的任何样式属性。请注意，返回的对象是只读，因此您需要将其用于初始if语句，然后像上面那样设置样式。

Answer 3

您可以从定义隐藏属性的元素中删除该类，并在要隐藏时添加：

if (document.getElementById("Expand").className == '') {
    document.getElementById("Expand").className = 'hiddenDiv';

}
else if (document.getElementById("Expand").className == 'hiddenDiv') {
    document.getElementById("Expand").className = '';

}

请注意，如果您在该元素上有其他类，则需要执行一些字符串操作，而不是直接检查并删除。

Answer 4

//Temporary solution 
//Replace your javascript code with following code

if (document.getElementById("Expand").style.display == 'block') {
    document.getElementById("Expand").style.display = 'none';
}
else{
    document.getElementById("Expand").style.display = 'block';
}

//Note :- Javascript detect '' (empty) when it try to search display property for expand block

Answer 5

@ user1689607的答案是正确的，如果你只需要使用javascript。如果你有权访问jQuery，你可以这样做

$("#Expand").toggle();

一个简单的jsfiddle来演示：http://jsfiddle.net/P36YA/

div不会在点击图像时显示

5 个答案: