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).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.
    }
});

如果您注意到这实际上是比较实际的 HTML 而不是 jQuery 对象。这是因为.target将点击内容的实际 HTML 返回给您。

于 2013-08-09T13:41:52.700 回答
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 回答