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

您可以为文档指定单击功能以隐藏弹出窗口，但为弹出窗口指定单击功能以防止出现这种情况。

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).

为click事件创建整个body的jquery事件

2 个答案: