web-dev-qa-db-ja.com

ボタンクリックを使用してdivの可視性を切り替える方法

以下は、divをクリックしたときにbuttonを表示するために使用したJavaScriptコードです。

もう一度クリックしたときに非表示にするにはどうすればよいですか？そして、それをクリックすると、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>
javascriptcsshtmlshow-hide
27
user2827600

JQueryソルトンに興味がある場合：

これは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/

27
Jan

表示スタイルをblockとnoneの間で切り替えるには、次のようにします。

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

動作デモ： http://jsfiddle.net/BQUyT/2/

57
Gigo

次のロジックを試してください：

<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

jQuery .toggle()を使用すると、簡単に実行できます

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

jQueryを使用したい場合、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
Jacques ジャック