Question

我创建了一个面板，当用户将搜索框对焦时，该面板会向下滑动。我在Jquery可怕但仍然在学习，我设法创建了基本功能：

＆＃13;

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

＆＃13;

使用此基本功能点击文本框外部将折叠面板我尝试实施一系列复杂的条件：

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

您应该在文档上绑定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。

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

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事件

2 个答案: