爲單擊事件創建整個身體的jquery事件

Question

這裏我創建了下拉列表。當點擊編輯框時，它顯示菜單項。

當我選擇菜單項時，此後菜單彈出框關閉。

但一旦彈出的項目被打開，如果我點擊外部彈出框它應該關閉該項目。 我該怎麼辦？

小提琴：Fiddle

JS：

$('.typeahead').typeahead({ 
    name: 'Some name', 
    local: ['Sports', 'Entertainment', 'Politics', 'Technolohy', 'Technolohy Again'] 
}) 
$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small'); 
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large'); 

$(".typeahead").click(function() { 
    var defaultval = $(".typeahead").val(); 
    $('.dropdown-menu').show(1200); 
}); 


$('ul.dropdown-menu >li').on('click', function(){ 
    var idd = $(this).attr('id'); 
    var val = ($("#"+idd).text()); 
    alert(val); 
    $(".typeahead").val(val); 
    $('ul.dropdown-menu').hide(600); 
}); 

Answer 1

只需使用模糊事件：

$(".typeahead").on('blur', function() { 
    $('.dropdown-menu').hide(1200); 
}); 

http://jsfiddle.net/RZTu5/1/

Answer 2

您可以將點擊功能來隱藏文件彈出式菜單，但將彈出式窗口的點擊功能分配給prev那個。

var $popup = $('.the-popup'); 

$(document).click(function() { 
    $popup.hide(); 
}); 
$popup.click(function() { 
    return false; 
}); 

Live demo (click).

在你的情況，這個邏輯看起來像：

$(document).click(function() { 
    $('ul.dropdown-menu').hide(600); 
}); 
$('.typeahead').click(function() { 
    return false; 
}); 

爲你做的blur都有哪些活動也很有用，因爲它會觸發一個功能當輸入失去焦點時（當你點擊其他地方）。行爲是相同的任何方式。這裏的區別在於blur有點受限制。如果彈出窗口顯示的不是輸入內容（輸入沒有焦點），則點擊其他地方不會隱藏它。無論哪種方式適用於你的情況。爲了完整起見，這裏就是一個普通的例子：

var $popup = $('.the-popup'); 
var $input = $('.my-input'); 

$input.focus(function() { 
    $popup.show(); 
}); 
$input.blur(function() { 
    $popup.hide(); 
}); 

Live demo (click).