-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

非表示のプロパティを定義する要素からクラスを削除し、非表示にするときに追加できます。

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 に答える
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 に答える
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

@ user1689607 の答えは、javascript を使用する必要がある場合に適しています。jQueryにアクセスできる場合は、次のように実行できます

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

そして、デモ用の簡単な jsfiddle: http://jsfiddle.net/P36YA/

于 2012-10-31T17:14:02.693 に答える