使用 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

您应该在文档上绑定点击功能，而不是使用 .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

Answer 2

试试这个 Working Demo

<script>

$(document).mouseup(function (e)
 {
var container = $("#search_form");

if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
{
    $(".search-panel").slideUp("fast");
}
else
   {
    $(".search-panel").slideDown("fast");
    $("#search_form [type='text']").focus();
   }
});

</script>

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

Chaining multiple Jquery events with OR operator

javascript

jquery

jquery-events