jquery show hide division

Question

$(document).ready(function() { 
    $(".btn-slide").focus(function() { 
     $("#moresearch").show("fast"); 
     $(".btn-slide").blur(function() { 
      $("#moresearch").hide("fast"); 
     }); 
    }); 
}); 

在此示例中.btn-slide是我的文本框。當它集中顯示moresearch股利。當它隱藏div div隱藏時。

問題是，當我點擊moresearch股利，股利關閉，但它應該只在外面點擊時關閉。

Answer 1

首先，你爲什麼要嵌套焦點和模糊事件綁定？這樣，每次'焦點'事件被觸發時，'模糊'都會受到約束（但它不會被解除綁定）。但這不是問題。

一個可能的解決方案是檢查模糊回調中焦點所在的元素。有關如何做到這一點的信息，請查看When onblur occurs, how can I find out which element focus went *to*?。

也許這樣的事情：

$(".btn-slide").blur(function(event) { 
    var target = event.explicitOriginalTarget||document.activeElement; 
    if (target != $("#moresearch")[0]) { 
     $("#moresearch").hide("fast"); 
    } 
} 

編輯：或者說這個勢力中的伎倆：

if (!$("#moresearch").has($(target)) > 0 &&! $("#moresearch")[0] == target) 

這將檢查其中的焦點離開，這是否是目標股利或之一這是孩子。沒有嘗試過。

Answer 2

試試這個：

$(document).ready(function() { 
    $(".btn-slide").focus(function() { 
     $("#moresearch").fadeIn("fast"); 
     $('body').not('.btn-slide').click(function() { 
      $("#moresearch").fadeOut("fast"); 
     }); 
    }); 
}); 

注意：使用fadeIn()和fadeOut，而不是顯示/隱藏，當你想要做的動作動畫。