用OR操作符链接多个Jquery事件

Chaining multiple Jquery events with OR operator

本文关键字：Jquery 事件 链接 OR 操作符      更新时间：2023-09-26

我正在创建一个当用户聚焦搜索框时向下滑动的面板。我不擅长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/

您应该在文档上绑定一个click函数，而不是使用.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。

注意:
我删除了标签，并将跨度更改为标签。单击标签还将(取消)选中其内部的复选框。有三个复选框会出错。因此，要么创建三个独立的标签(而不是span)，要么删除它。

更新小提琴

Try this 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>
相关文章：