5

クリック時に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>
4

4 に答える 4

6

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
}
    }

デモフィドル

于 2013-09-19T07:03:10.257 に答える
1

フィドルでは、jQuery UI を含めました。その場合toggle、jQuery UI イージングを使用できます。負の左を使用してグラジーになることはありませんが、display block-none のみを使用します。

attribute の代わりに表示状態を使用して更新されましhiddenた。

コード：

$(document).ready(function() {
    $('#showmenu').click(function() {
        var hidden = $('.sidebarmenu').is(':visible');
        $('#showmenu').text(hidden ? 'Show Menu' : 'Hide Menu');

        $(".sidebarmenu").toggle("slide", {direction:'left'});

    });
});

デモ: http://jsfiddle.net/W5Wmw/1/

于 2013-09-19T07:05:27.213 に答える
1

問題は、cssプロパティを使用すると、すぐにアクションが実行されることです。それ自体を「アニメーション化」したい (つまり、左の動きを見たい) 場合はanimate、同じ CSS プロパティのセットで関数を使用する必要があります。

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

    });
});
于 2013-09-19T07:02:34.653 に答える
0 
var status = 0;
$("#mobileMenuButton").click (function (){
    if (status == 0){
        $('#element').css ({'left': 0, 'transition' : '0.3s'})
        status = 1
    } else if (status == 1){ 
        $('#element').css ({'left': '-355px', 'transition' : '0.3s'})
        status = 0
    }

CSS:#element{ left: -355px }

于 2020-06-16T23:01:00.857 に答える