0

こんにちは、ユーザーが外側をクリックすると、サイド スライダー ボタンがスムーズにスライドして元の位置に戻るようにしたいと考えています。

あなたがそれをチェックしたいなら、ここにそれのjfiddleがあります

現時点では、外側をクリックしても元の位置に戻りません。

JS

$(document).ready(function () {
    $('#slideleft .mybutton').click(function () {
        var $lefty = $(this).parent();
        $lefty.animate({
            left: parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() + 31 : 0
        });
    });
});
4

3 に答える 3

1

これを追加すると、次のようになります。

$(document).click(function () {
    var $lefty = $('#slideleft .mybutton').parent();
    if(parseInt($lefty.css('left'), 10) == 0){
    $lefty.animate({
        left: -$lefty.outerWidth() + 31
    });
    }
});

ここにフィドルがあります

于 2013-08-09T13:45:44.903 に答える
1

以下をお試しください。

$(document).mouseup(function (e) {
        var $lefty = $('#slideleft .mybutton').parent();
        var container = $("#slideleft");
        if (parseInt($lefty.css('left')) == 0) if (container.has(e.target).length === 0) {
            animate();
        }
    });

これが実用的なフィドルです：

JSFiddle

于 2013-08-09T13:40:08.763 に答える
1

いくつかのevent.targetトリックを使用すると、次のようになります。

$(document).on('click', function (event) {
    if (event.target !== $('#slideleft .mybutton')[0]) {
        $('#slideleft .mybutton').hide(); //or slide however you want to.
    }
});

これは実際には jQuery オブジェクトではなく、実際の HTML を比較していることに気付きました。これは、.targetクリックされたものの実際の HTML が返されるためです。

于 2013-08-09T13:41:52.700 に答える