verstecken und zeigen div in Javascript

-5

Ich möchte div anzeigen und dann ausblenden, aber wenn ich auf die Schaltfläche klicken, funktioniert es nicht zum ersten Mal, wenn ich zum zweiten Mal klicke funktioniert es normal. Ich möchte, dass es beim ersten Klick funktioniert.verstecken und zeigen div in Javascript

HTML

<p>Click the button</p> 
    <button onclick="myFunc()">Try it</button> 
    <div id="divi"> 
    Div region 
    </div>

CSS

 #divi { 
     width: 50%; 
     padding: 50px 0; 
     text-align: center; 
     background-color: #ccc; 
     margin-top:20px; 
     display:none; 
    }

Javascript

 function myFunc() { 
     var dv = document.getElementById('divi'); 
     if (dv.style.display ==='none') { 
     dv.style.display = 'block'; 
     } else { 
     dv.style.display = 'none'; 
     } 
     }

Hier ist der Stift: https://codepen.io/animaxf/pen/xdVVbK

Quelle

2017-04-20 Ans

Wenn Sie die Taste zum ersten Mal klicken, setzt es 'Anzeige: none', dann das zweite Mal' Anzeige: block'. – billett

Dies, weil technisch, Stil-Attribut ist leer, also style.display ist eigentlich null. So macht es zuerst display:none; beim ersten Klick.

Wenn Sie ändern das JavaScript zu sein:

function myFunc() { 
    var dv = document.getElementById('divi'); 
    if (dv.style.display === 'block') { 
    dv.style.display = 'block'; 
    } else { 
    dv.style.display = 'none'; 
    } 
}

Grundsätzlich Überprüfung ist Block zuerst - es wird funktionieren.

function myFunc() { 
 
    var dv = document.getElementById('divi'); 
 
    if (dv.style.display === 'block') { 
 
     dv.style.display = 'none'; 
 
    } else { 
 
     dv.style.display = 'block'; 
 
    } 
 
}

#divi { 
 
    width: 50%; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    background-color: #ccc; 
 
    margin-top:20px; 
 
    display:none; 
 
}

<p>Click the button</p> 
 

 
<button onclick="myFunc()">Try it</button> 
 

 
<div id="divi"> 
 
Div region 
 
</div>

Quelle

2017-04-20 14:51:31 Albzi

Diese Antwort scheint ein bisschen wie ein Hack zu sein und wird nur auf Divs funktionieren, die versteckt sind – Pete

Dieses <div id="divi" style="display:none">

Das erste Mal wird eine Anzeige nicht für Ihre div definiert

Quelle

2017-04-20 14:51:50 Epitouille

Wenn Sie zum ersten Mal klicken kein Stil angelegt ist (dv .style.display = "") also, dv.style.display! == 'none' wird wahr und dv.style.display = 'none' wird angewendet.

function myFunc() { 
 
    var dv = document.getElementById('divi'); 
 
    
 
    if (dv.style.display !=='none'&& dv.style.display !=="") { 
 
     dv.style.display = 'none'; 
 
    } else { 
 
     dv.style.display = 'block'; 
 
    } 
 
}

#divi { 
 
    width: 50%; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    background-color: #ccc; 
 
    margin-top:20px; 
 
    display:none; 
 
}

<body> 
 

 
<p>Click the button</p> 
 

 
<button onclick="myFunc()">Try it</button> 
 

 
<div id="divi"> 
 
Div region 
 
</div> 
 

 
</body>

Quelle

2017-04-20 14:52:23 Knitesh

Es gibt keine display Eigenschaft festgelegt, wenn Sie das erste Mal klicken. Habe gerade die Eigenschaften gewechselt - es wird funktionieren.

https://codepen.io/anon/pen/XRddvd

Quelle

2017-04-20 14:53:10 Mary

Das erste Mal, wenn Sie auf die Schaltfläche klicken, wird die CSS-Eigenschaft display noch nicht festgelegt, also wenn Klick überprüft er eher dv.style.display !== 'none' während tatsächlich dv.style.display === ''

Sie tritt dies in Ihrem Code beheben, oder Sie können einfach das CSS ändern, da es eine elegantere Lösung ist. Wenden Sie einfach display: block (oder display: none nach Ihrem Wunsch-Start-Zustand) auf #divi innerhalb seiner CSS-Definition.

Quelle

2017-04-20 14:53:15

Das ist, weil Sie den Stil des div ändern, aber das display:none Attribut ist innerhalb des Klassenelements. Also, das erste Mal das Div nicht das Display-Attribut und es als none deklarieren. Um das zu beheben, setzen Sie style="display:none; auf das div, anstatt es in der css-Datei zu deklarieren

Quelle

2017-04-20 14:53:21

Klicken Sie zuerst auf die else-Anweisung, und zeigen Sie es an.

Danach sind Sie in einer guten Schleife.

function myFunc() { 
 
    var dv = document.getElementById('divi'); 
 
    if (dv.style.display == 'block') { 
 
     dv.style.display = 'none'; 
 
    } else { 
 
     dv.style.display = 'block'; 
 
    } 
 
}

#divi { 
 
    width: 50%; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    background-color: #ccc; 
 
    margin-top:20px; 
 
    display: none; 
 
}

<body> 
 

 
<p>Click the button</p> 
 

 
<button onclick="myFunc()">Try it</button> 
 

 
<div id="divi"> 
 
Div region 
 
</div> 
 

 
</body>

Quelle

2017-04-20 14:53:50

Wenn Sie zuerst die Seite laden, ist die Klasse der nicht angemeldete Bedeutung, dass Sie Anweisung if (dv.style.display !=='none') wahr zurück und wenden Sie dann eine Anzeige propert dv.style.display = 'none';

Stattdessen sollten Sie verwenden if (dv.style.display =='block') zu überprüfen Sie, ob es angezeigt wird.

function myFunc() { 
 
    var dv = document.getElementById('divi'); 
 
    if (dv.style.display =='block') { 
 
     dv.style.display = 'none'; 
 
    } else { 
 
     dv.style.display = 'block'; 
 
    } 
 
}

#divi { 
 
    width: 50%; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    background-color: #ccc; 
 
    margin-top:20px; 
 
    display:none; 
 
}

<body> 
 

 
<p>Click the button</p> 
 

 
<button onclick="myFunc()">Try it</button> 
 

 
<div id="divi"> 
 
Div region 
 
</div> 
 

 
</body>

Quelle

2017-04-20 14:56:32

verstecken und zeigen div in Javascript

Antwort

Verwandte Themen