-1

不知道问题出在哪里，尝试了各种方法，但我没有任何运气。我过去曾成功完成过此操作，但现在无法正常工作，任何帮助都会很棒...

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

我究竟做错了什么？

4

5 回答 5

3

在您的 CSS 中设置的初始display值将无法从该.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' : '';
}
于 2012-10-31T17:04:57.723 回答
3

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

于 2012-10-31T17:06:47.130 回答
3

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

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

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

}

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

于 2012-10-31T17:10:09.930 回答
2 
//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
于 2012-10-31T17:19:15.990 回答
1

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

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

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

于 2012-10-31T17:14:02.693 回答