使用OR運算符鏈接多個Jquery事件

我創建了一個面板，當用戶關注搜索框時向下滑動。我可怕的jQuery的，但仍然在學習，我已經成功地創建了基本的功能：與文本框外的這個基本功能點擊後會摺疊起來的面板我使用OR運算符鏈接多個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))

基本上我需要確保用戶沒有懸停或以某種方式與面板交互，而且textbo x在我滑動之前沒有集中注意力。

的jsfiddle現狀： http://jsfiddle.net/b9g9d6gf/

來源

2015-07-13 davegri

你可以提供一個[的jsfiddle（http://www.jsfiddle.net）或HTML？ – LinkinTED

http://jsfiddle.net/b9g9d6gf/ – davegri

除了使用.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

來源

2015-07-13 13:13:15 LinkinTED

試試這個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>

來源

2015-07-13 13:17:01

這一個實際上上下滑動，如果一個複選框很快，並不理想，但感謝您的幫助 – davegri

哦，這是錯誤的更新鏈接我給了你，有一個看看編輯答案後鏈接@davegri –

使用OR運算符鏈接多個Jquery事件

回答

相關問題