webentwicklung-frage-antwort-db.com.de

So schalten Sie die Sichtbarkeit eines Divs mit einem Klick auf eine Schaltfläche um

Unten ist mein Javascript-Code, den ich verwendet habe, um ein div anzuzeigen, wenn ich auf ein button geklickt habe.

Wie kann ich es ausblenden, wenn ich erneut klicke? Und wenn Sie darauf klicken, sollte div wieder sichtbar sein?

<script type="text/javascript">
var _hidediv = null;
function showdiv(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}
</script>
javascriptcsshtmlshow-hide
27
user2827600

Falls Sie an einer jQuery-Lösung interessiert sind:

Das ist das HTML

<a id="button" href="#">Show/Hide</a>
<div id="item">Item</div>

Dies ist das jQuery-Skript

$( "#button" ).click(function() {
    $( "#item" ).toggle();
});

Hier können Sie sehen, wie es funktioniert:

http://jsfiddle.net/BQUyT/

Wenn Sie nicht wissen, wie man jQuery verwendet, müssen Sie diese Zeile verwenden, um die Bibliothek zu laden:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Und dann benutze diese Zeile um zu beginnen:

<script>
$(function() {
    // code to fire once the library finishes downloading.
});
</script>

In diesem Fall wäre der endgültige Code also:

<script>
$(function() {
    $( "#button" ).click(function() {
        $( "#item" ).toggle();
    });
});
</script>

Lassen Sie mich wissen, wenn Sie noch etwas brauchen

Weitere Informationen zu jQuery finden Sie hier: http://jquery.com/

27
Jan

Um den Anzeigestil zwischen block und none umzuschalten, können Sie folgendermaßen vorgehen:

function toggleDiv(id) {
    var div = document.getElementById(id);
    div.style.display = div.style.display == "none" ? "block" : "none";
}

arbeitsdemo: http://jsfiddle.net/BQUyT/2/

57
Gigo

Versuchen Sie folgende Logik:

<script type="text/javascript">
function showHideDiv(id) {
    var e = document.getElementById(id);
    if(e.style.display == null || e.style.display == "none") {
        e.style.display = "block";
    } else {
        e.style.display = "none";
    }
}
</script>
1
Ahsan Shah

mit JQuery .toggle() können Sie es leicht erreichen

$( ".target" ).toggle();
0
Sobin Augustine

jQuery wäre der einfachste Weg, wenn Sie es verwenden möchten, aber dies sollte funktionieren.

<script type="text/javascript">
    function showHide(){

        var e = document.getElementById('e');

    if ( e.style.display != 'none' ) {
        e.style.display = 'none';
    }
    else {
        e.style.display = '';
    }

}
</script>
0
Jacques ジャック