Как переключить видимость div с помощью нажатия кнопки

ниже мой код JavaScript, который я использовал, чтобы показать div при нажатии на button.

как я могу скрыть его, когда снова щелкнет? И затем, щелкнув по нему,div должен быть виден снова?

<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>
20
css html javascript show-hide

5 ответов

в случае, если вы заинтересованы в jQuery soluton:

это HTML

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

это скрипт jQuery

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

вы можете видеть, как он работает здесь:

http://jsfiddle.net/BQUyT/

если вы не знаете, как использовать jQuery, вы должны использовать эту строку, чтобы загрузить библиотеку:

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

а затем используйте эту строку, чтобы начать:

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

поэтому для этого случая окончательный код будет это:

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

Дайте мне знать, если вам что-нибудь понадобится

вы можете прочитать больше о jQuery здесь:http://jquery.com/

25

для переключения отображения между block и none вы можете сделать что-то вроде этого:

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

рабочая демо:http://jsfiddle.net/BQUyT/2/

43

попробуйте следующую логику:

<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

С JQuery .toggle() вы можете сделать это легко 

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

jQuery будет самым простым способом, если вы хотите его использовать, но это должно работать.

<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