javascript - 使用 OR 运算符链接多个 Jquery 事件

Question

我正在创建一个面板，该面板会在用户聚焦搜索框时向下滑动。 我的 Jquery 很糟糕，但仍在学习，我已经设法创建了基本功能:

$(document).ready(function() {
  $(".search-panel").hide();
  $("#search_form [type='text']")
    .focus(function() {
      $(".search-panel").slideDown("fast");
    })
    .focusout(function() {
      $(".search-panel").slideUp("fast");
    });
});

有了这个基本功能，在文本框外单击将折叠面板我正在尝试实现一组复杂的条件:

IF (textbox.focus) { show search panel}

IF (texbox.losefocus) && ( NOT search-panel.mouseover)
&& ( NOT (anything-in-search-panel-is-focused) )

基本上我需要确保用户没有悬停在面板上或以某种方式与面板交互，并且在我向上滑动文本框之前没有聚焦文本框。

JsFiddle的现状: http://jsfiddle.net/b9g9d6gf/

Answer 1

您应该在文档上绑定(bind)点击功能，而不是使用 .focusout() 功能。

$(document).ready(function () {
    $(".search-panel").hide();
    $("#search_form [type='text']")
        .focus(function () {
        $(".search-panel").slideDown("fast");
    });

    $(document).click(function(e) {
        if( !( $(e.target).is('#search_form *')) ){
           $(".search-panel").slideUp("fast");
        }
    });
});

如果文档在任何地方被点击，它会检查目标是否不是 #search_form 中的元素。如果没有，它将向上滑动 .search-panel。

注意:
我删除了标签并将跨度更改为标签。单击标签还将(取消)选中其中的复选框。具有三个复选框使其行为错误。因此，要么制作三个单独的标签(而不是跨度)，要么将其删除。

Updated Fiddle