通过单击DOM上的任意位置来关闭页脚

Question

我有一个关于折叠/扩展页脚的问题。我有一个简单的基本崩溃/扩展脚本，当点击“打开”按钮时，隐藏的页脚向上滑动，当您单击“关闭”时，它会向下滑动并再次隐藏。现在，我想附加一个实例，当页脚打开并且它将关闭时，我可以点击DOM上的任何地方。

这是剧本：

$(document).ready(function () {

    // Expand Panel
    $("#footerOpen").click(function (e) {
        e.preventDefault();
        $("div#footerPanel").slideDown("slow");

    });

    // Collapse Panel
    $("#footerClose").click(function (e) {
        e.preventDefault();
        $("div#footerPanel").slideUp("slow");
    });

    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });

});

由于

Answer 1

$(document).ready(function () {

    // Expand Panel
    $("#footerOpen").click(function (e) {
        e.preventDefault();
        $("div#footerPanel").slideDown("slow");

    });

    // Collapse Panel
    $("#footerClose").click(function (e) {
        e.preventDefault();
        $("div#footerPanel").slideUp("slow");
    });

    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });

       //  click anywhere on teh DOM when the footer is open and it will close.
    $("body:not(#footerClose)").click(function (e) {
        e.preventDefault();
        $("div#footerPanel").slideUp("slow");
    });



});

尝试这个，我使用jquery而不是选择器。

Answer 2

将点击处理程序附加到document，并在其中执行slideUp。您可以使用event.target来确定是否执行slideUp：

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

    // Don't slideUp if #footerOpen or #footerPanel are clicked
    if ($(e.target).is('#footerOpen, #footerPanel')) {
        return;
    }

    // Do the slideUp!
    $('#footerPanel').slideUp('slow'); 

});

Here's a fiddle

如果您的#footerPanel中有其他元素，则上述可能无法正常工作，因为目标可能不是#footerPanel，最好的办法是添加click的{​​{1}}处理程序，并阻止事件传播并触发上述#footerPanel处理程序：

click

Here's another fiddle

Answer 3

试试这个对我有用......

 $(document).click(function(event) {
    var $target = $(event.target);
    if(!$target.is("#footerPanel")){
         $("#footerPanel").slideUp('slow'); 
    }
 });