需要用jQuery点击功能修改

这是我正在尝试做的事情。我已经创建了一个jsfiddle，所以你可以看看，让我知道如何做我在找什么。需要用jQuery点击功能修改

$(document).ready(function() { 
    $('#trigger-button').click(function() { 
     $('#trigger-box').toggle(); 
    }); 
});

http://jsfiddle.net/s2FzE/

它尽可能代码而言工作正常。点击按钮会触发一个框出现并消失。工作正常。

但我想要的是，如果有人点击按钮和框出现然后框可以通过2种方法消失。

按钮或
单击除盒（点击页面主体）的任何地方<再次点击 - 这是我需要帮助。

来源

2013-07-25 Robert hue

首先，摆脱传递给'click'的第二个参数/函数。这个不成立。之后，看看jQuery UI对话框。他们可能会做你想做的。还有很多类似的库可以显示模态对话窗口。 – ThiefMaster

谢谢了。自从我使用切换以来，第二个参数没有做任何事情。 :)但我仍然需要一个最简单的方法来做第二部分。我不想用大型图书馆来实现这一点。 –

也有小的。例如http://www.malsup.com/jquery/block/。但是，如果你不想要模态行为，请参阅adeneo的答案。 – ThiefMaster

请收听文档级别的点击，并筛选出按钮或盒子任何点击：

$(document).ready(function() { 
    $('#trigger-button').click(function() { 
     $('#trigger-box').toggle(); 
    }); 
    $(document).on('click', function(e) { 
     if (!$(e.target).closest('#trigger-box, #trigger-button').length) 
      $('#trigger-box').hide(); 
    }); 
});

FIDDLE

来源

2013-07-25 09:10:03 adeneo

代替'e.target'检查，您可以简单地在对话框的最外层元素上添加一个单击处理函数，并调用'e.stopPropagation（）'来防止事件到达您添加到文档本身的处理函数。这消除了分别检查对话框内的每个项目的需要。 – ThiefMaster

@ThiefMaster - 是的，但按钮和框是兄弟姐妹，所以这意味着要么停止在包含元素'＃容器'，这听起来像一个元素，将包含更多的元素，并停止传播的传播这可能会导致问题，所以只检查目标似乎更合适。 – adeneo

嗯，你为什么想要在对话框中传播一个点击事件给外部世界？ – ThiefMaster

这里是我的方法：

你需要一个document事件侦听器在用户单击任何地方时隐藏该框。但是事件监听器是没有必要的，当箱子被隐藏，所以 - 它可以在显示框只加，如：

var box = $('#trigger-box'), 
    showBox = function (e) { 
     if (!box.is(':visible')) {      // only do that when box is hidden 
      e.stopPropagation();      // required to prevent document 
      box.show(); 
      $(document).on('click.showBox', hideBox); // event namescope for easy removal 
     } 
    },

然后 - 当盒子被隐藏 - 我们可以删除此事件侦听器，像这样：

var hideBox = function (e) { 
    var target = $(e.target); 
    if (target.is(box) || target.closest(box).length) return; // don't close if clicked on box or on anything inside the box 
    $(document).off('click.showBox'); 
    box.hide(); 
}

，然后 - 我们可以只添加事件侦听器：

$('#trigger-button').on('click', showBox);

DEMO

来源

2013-07-25 09:12:36 tborychowski

我不明白，你有两个upvotes，但你为什么要添加一个事件处理程序内的另一个事件处理程序，然后使用off（），对我来说，它根本不工作，单击该框，它消失，并点击两次按钮，它不会消失？也许我误解了这个问题！ – adeneo

看起来很有趣，但点击触发按钮正在调用显示框事件，并且在再次点击时不会隐藏框。是对的吗。 –

@Roberthue好，赶快，谢谢。现在已经纠正了。 – tborychowski

需要用jQuery点击功能修改

回答

相关问题