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

【问题标题】：Close footer by clicking anywhere on the DOM通过单击 DOM 上的任意位置关闭页脚
【发布时间】：2014-03-26 08:52:08
【问题描述】：

我有一个关于折叠/展开页脚的问题。我有一个简单的基本折叠/展开脚本，当单击“打开”按钮时，隐藏的页脚会向上滑动，当您单击“关闭”时，它会向下滑动并再次隐藏。现在，我想附加一个实例，当页脚打开并关闭时，我可以在 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();
    });

});

谢谢

【问题讨论】：

如果点击不是由另一个控件处理的，在哪里？（例如链接？）在这种情况下，您可以附加到正文本身，否则 AFAIK 您必须在页面顶部放置一个静态透明 div 并处理点击那里。
$(document) 而不是 $("#footerOpen") 和 $("#footerClose")
如果你在footerPanel里面点击会发生什么，然后它也会关闭
嘿 Arun，我希望在页脚面板内单击时什么都不发生。尝试过，但没有取得任何成果。
试试jsfiddle.net/arunpjohny/aUU9X/1

标签： javascript jquery css html

【解决方案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 而不是选择器。

【讨论】：

谢谢阿卡普拉瓦。像魅力一样工作。

【解决方案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 处理程序添加到@ 987654331@，并阻止事件传播并触发上述click handler：

$('#footerPanel').on('click', function(e) {
    e.stopPropagation();
});

Here's another fiddle

【讨论】：

感谢 Billyonecan。它工作得很好。为了不麻烦，我根据页脚的状态进行了切换。当页脚折叠时，显示打开页脚，当页脚展开时，显示“关闭页脚”。我怎样才能在这个小提琴上实现它？

【解决方案3】：

试试这个对我有用...

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

【讨论】：