Question

我有一个菜单项，如果我点击它会打开一个面板全屏。打开此面板后，我希望能够在任何位置单击以关闭它。面板是z-index和绝对定位的顶部。

这不起作用：

jQuery(".fa").on("click", function(){
    jQuery(".my_search").addClass("opensearch");
    jQuery(".my_search").show();
});
jQuery(".opensearch").on("click", function(){
    jQuery(".my_search").removeClass("opensearch");
    jQuery(".my_search").hide();
});

http://jsfiddle.net/xrfhpm7q/4/

Answer 1

我有这种情况，并通过以下方式解决：

$(function () {
    //open the menu when you click on the button
    $('button').on('click', function () {
       $('nav').show(); 
    });

    //close the menu on any click, except the ones on the button
    $('body').on('click', function (e) {
        if(!$(e.target).is('button')) {
            $('nav').hide();
        }
    });
});

您可以在http://jsfiddle.net/v5svskej/1/

上看到它的实际效果

Answer 2

在调用函数时尝试使用字符串，例如：

jquery('.fa').on('click', function(){
    jquery('.overlay').on('click', function(e){
        if(e.target === this){
            jQuery(".my_search").removeClass("opensearch");
            jQuery(".my_search").hide();
        }
    });
});

仅供参考，关闭ESC：

jquery(document).keydown(function(e) {
    if(e.keyCode == 27){
        jQuery(".my_search").removeClass("opensearch");
        jQuery(".my_search").hide();
    }
});

Answer 3

jQuery(".my_search").on("click", function() {
    jQuery(".my_search").removeClass("opensearch");
    jQuery(".my_search").hide();
});

编辑：这有效。我不知道为什么我不会早点想到它......

jsFiddle

<强>更新

正如Daniel所述，因为当DOM加载时.opensearch不存在，您需要将事件附加到那里的事物。由于.my_search 确实存在（虽然是隐藏的），我们可以将事件附加到此类，而click函数将按预期工作。

Answer 4

问题在于您将点击处理程序附加到.opensearch，但.opensearch尚未存在。

将其附加到将存在的元素，例如body，并将选择器传递给on()函数。

jQuery("body").on("click", ".opensearch", function(){//do stuff});

您可以在此处查看：http://jsfiddle.net/jeq34rvu/1/

如何点击任何地方并关闭面板？

4 个答案: