클릭 이벤트에 대한 전체 본문에 대한 jquery 이벤트 만들기

Question

여기에서 드롭 다운 목록을 만들었습니다. 편집 상자를 클릭하면 메뉴 항목이 표시됩니다.

메뉴 항목을 선택하면 메뉴 팝업이 닫힙니다.

하지만 일단 팝업 항목이 열리면 외부 팝업 상자를 클릭하면 항목을 닫아야합니다. 어떻게해야합니까?

바이올린 : Fiddle

JS :

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

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

Answer 1

는 단순히 흐림 이벤트를 사용 popup하지만 pop 함수에 click 함수를 지정하여 prev 그거야. 이 기능을 발사하기 때문에, 유용 무엇인지는 blur 이벤트를하고있는 경우

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

:

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

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

귀하의 경우에는

Live demo (click).

,이 논리는 같을 것이다 입력이 포커스를 잃을 때 (다른 곳을 클릭 할 때). 행동은 어느 쪽이든 마찬가지입니다. 차이점은 blur이 조금 더 제한된다는 것입니다. 팝업이 입력 이외의 다른 것으로 표시되면 (입력에 포커스가 없음) 다른 곳을 클릭해도 숨길 수는 없습니다. 어느 쪽이든 당신의 경우에 효과가 있습니다.

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

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

Live demo (click).

: 완성도를 들어, 여기에의 일반적인 예입니다

Answer 2

당신은 숨길 문서에 클릭 기능을 할당 할 수 있습니다

$('.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); 
});