Question

以下是我的演示链接：http://jsfiddle.net/euavm0mo/1/

我想在表单元素外单击后关闭叠加层。

现在，只要您点击，它就不会打开或关闭叠加层。

谢谢

 //Search
$("#block-block-3 p").click(function() {
    $(".searchform-overlay").addClass("header-search-active");

});

$(".close-btn").click(function() {
    $(".searchform-overlay").removeClass("header-search-active");
});

});

//    $(document).on("click", function (e) {


//   if (e.target.id == "searchform-container" || !$(e.target).closest("#searchform-container").length) {
//  $(".searchform-overlay").removeClass( "header-search-active" ); //
//}

Answer 1

这应该这样做：http://jsfiddle.net/x0v91ena/

当用户没有点击段落，输入字段或周围的小包装时，叠加层会关闭。

$(document).ready(function () {

    //Search
    $("#block-block-3 p").click(function () {
        $(".searchform-overlay").addClass("header-search-active");

    });
    $(".close-btn").click(function () {
        $(".searchform-overlay").removeClass("header-search-active");
    });

    $(document).click(function (e) {
        if ($(".searchform-overlay").hasClass("header-search-active")) {
            if (!$('#search-form').is(e.target) && !$('input').is(e.target) && !$('#open').is(e.target)) {
                $(".searchform-overlay").removeClass("header-search-active");
            }
        }
    });
});

单击div外部后关闭叠加

1 个答案: