jquery - div を非表示にするその他の方法

Question

クリック時にdivを切り替えるjQueryがあります。

$(document).ready(function() {
$('#showmenu').click(function() {
    $('#showmenu').text($('.sidebarmenu').is(':visible') ? 'Show Menu' : 'Hide Menu');
    $('.sidebarmenu').toggle("slide");
}); 
});

フィドル

使用せずにどうすれば同じことができますか

display:none;

??

Answer 1

オフセットベースのソリューションを見る

<button id="showmenu" type="button">Show menu</button></div>
<div class="sidebarmenu" style="position: absolute; left: -200000px">

    Can the button value change to "show" or "hide"
</div>

それから

$(document).ready(function() {
    $('#showmenu').click(function() {
        var hidden = $('.sidebarmenu').data('hidden');
        $('#showmenu').text(hidden ? 'Show Menu' : 'Hide Menu');
        if(hidden){
            $('.sidebarmenu').css({
                position: 'absolute',
                left: -200000
            })
        } else {
            $('.sidebarmenu').css({
                position: '',
                left: 0
            })
        }
        $('.sidebarmenu').data("hidden", !hidden);
    });
});

デモ:フィドル

Answer 2

.show()と を使用してこれを配置することもできます.hide()

($('#showmenu').is(':visible')) ? $('.sidebarmenu').show() 
                                : $('.sidebarmenu').hide();

そして、ページの読み込み時にdivを非表示にします

$('.sidebarmenu').hide();

フィドルを見る

Answer 3

div u を非表示にするには使用でき、使用Visible="false"を表示するにはVisible="true"

Answer 4

$(document).ready(function() {
$('#showmenu').click(function() {
    $('#showmenu').text($('.sidebarmenu').is(':visible') ? 'Show Menu' : 'Hide Menu');
    $('.sidebarmenu').toggle("show");
}); 
});