jQuery .not（）问题

Question

我要做的前提是使用jQuery启动CSS转换以打开和关闭搜索框。

用户单击放大镜图标，框打开，用户单击页面上的任意位置，但搜索表单框关闭。

要关闭，请使用以下命令：

$('body *').not('#header-search, #header-field, #header-submit').click(function () {

以及在这里找到的答案的不同变化： jQuery-选择除单个元素及其子元素以外的所有内容？ 没有成功。

单击input＃header字段将始终关闭该框。

笔在这里：

http://codepen.io/anon/pen/RNbmwr

谢谢阅读。

Answer 1

您的代码非常激进（ 它将应用于所有元素，因此.not()中的内部元素将触发它 ）。

最好将框的关闭委托给body （ 因为单击事件会冒泡 ），并手动取消禁止列表下发生的任何事件。

$('body').on('click', function(){
   // code for closing box here
});

$('#header-search, #header-field, #header-submit').on('click', function(){
   return false; // stop bubbling of event
});

---

并且由于在您的示例中， #header-field和#header-submit是header-search后代，因此您只需要取消对该header-search的冒泡

$('#header-search').on('click', function(){
   return false; // stop bubbling of event
});

演示在http://codepen.io/gpetrioli/pen/XJrwXO

Answer 2

尝试使用jQuery toggle（）函数：

<script>
$( "button" ).click(function() {
  $( "p" ).toggle( "slow" );
});
</script>

将放大镜的ID替换为“按钮”，然后更改段落-$（“ p”）-您要显示/隐藏的搜索控件。 切换更改指示的ID或类的可见性。 如果最初是隐藏的，则单击鼠标将使其可见； 如果最初可见，则单击鼠标即可将其隐藏。

最后，如果您不希望过渡“缓慢”移动，请更改过渡的速度

有关toggle（）的更完整说明，请参见http://api.jquery.com/toggle/

Answer 3

页面上有很多元素。 其中一些可能包含您命名的元素，也可能包含在您命名的元素中。 因此他们仍然会触发事件。

而是绑定一个事件处理程序：

$("body").click(function(evt) {

并检查是否单击了以下元素之一：

    if( $(evt.target).parents("#header-search").length > 0) {

如果是这样，则取消处理程序：

        return true;
    }

否则，请执行实际事件：

    doSomething();
});