使用jQuery在左侧隐藏/显示

Question

我想在点击时隐藏/显示div.当我希望它隐藏时,我希望div能够隐藏起来.我有这个.但是这个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,.image').data("hidden", !hidden);
    });
}); 

这是我的HTML

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

Answer 1

使用animate()表明它移至左侧

编辑:

如果你想最初显示div:

HTML:

<button id="showmenu" type="button">Hide menu</button>
<div class="sidebarmenu">
     This should go left
</div>

JS:

if(hidden){
        $('.sidebarmenu').animate({
            left: '0px'
        },500)
    } else {
        $('.sidebarmenu').animate({
            left: '-200px'
        },500)

CSS:

.sidebarmenu{
    position:absolute;
    left: 0px
}
    }

演示小提琴