jQuery 点击 SlideUp/Down 脚本

Question

我创建了以下脚本:

$(".clickme").click(function () {
    var isVisible = $(".slide-div").is(":visible");
    $(".slide-div:visible").stop().slideUp(400);

    if (!isVisible) {
        $(".slide-div").slideDown(400);
    }           
});

该脚本运行良好，现在我正尝试通过在 slide-div 外部单击来展开脚本。因此，当我在 div 外部单击时，它也会向上滑动。我尝试使用以下功能，但这不起作用。

$(":not(.slide-div)").click(function () {
    if ($(".slide-div").is(":visible");) {
        $(".slide-div:visible").stop().slideUp(400);
    }
});

Answer 1

怎么样:

$(document).on('click', 'body', function (e) {

    var clicked_slideDiv = $(e.target).closest('.slide-div').length > 0,
        isClickme = $(e.target).is('.clickme'),
        isVisible = $(".slide-div").is(":visible");

    if(isVisible && (isClickme || !clicked_slideDiv)) { 
        $(".slide-div").stop().slideUp(400);
    } else if (!isVisible && isClickme) {
        $(".slide-div").slideDown(400);
    }
});

您可以将 body 切换为您想要将“div 之外”缩小到的任何选择器。