formatting lose when showing a previously hidden d

问题:

So my webpage shows a new div when you click on an existing div. This hidden div has exactly the same formatting as the existing visible div, but when it is made to appear, all of that formatting is lost and I can't quite work out why. Here's the code:

<div id="visible" class="visibleDiv" onclick="expandItem()">
   Stuff here
</div>

<div id="invisible" class="hiddenDiv">
    Stuff here
</div>

And here's my JavaScript:

function expandItem() {

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

}

Any help is greatly appreciated!

回答1:

Try This

<div id="visible" class="visibleDiv" onclick="expandItem()">
    Stuff here
</div>
<div id="invisible" style="display:none;" class="hiddenDiv">
    Stuff here
</div>

And make change in javascript

function expandItem() {
if (document.getElementById("invisible").style.display == 'none') {
    document.getElementById("invisible").style.display = 'block';

}

回答2:

yeah this should fetch the solution

function expandItem() {
if (document.getElementById("invisible").style.display == 'none' || document.getElementById("invisible").style.display == '') {
    document.getElementById("invisible").style.display = 'block';

}

this line

document.getElementById("invisible").style.display == ''

is irrelavent , the main code to be executed is

document.getElementById("invisible").style.display == 'none'