Question

我有一个按钮'按钮'，可以激活下拉框'框'：

$('.button').click(function() 
{           
    $(this).siblings(".box").toggle();
});

每次单击该按钮时，下拉框都会隐藏或显示

$('.box').blur(function()
{   
    $(this).hide();
});

现在我想实现一个模糊，这样当用户点击下拉框以外的其他内容时，该框会隐藏自己。

BUT

现在当我在下拉列表打开时单击按钮时，它会关闭并重新打开。我觉得我陷入了一个Catch-22。

问题是，当下拉菜单打开时单击按钮时，模糊和.click都会触发。

Answer 1

$('.box').blur(function()
{  

    if($(this).is(":visible"))    
     $(this).toggle();

});

Answer 2

尝试

$('.box').blur(function(event)
{   
    $(this).hide();
    event.stopPropagation(); //prevent event from bubbling up the DOM
});

Answer 3

不要使用模糊，而是在文档的任何位置查找单击，但在单击框或按钮时阻止冒泡。

$('.button').click( function(event) {
  $(this).siblings('.box').toggle();
});
$('html').click( function() {
  $('.box').hide();
});
$('.box, .button').click( function() {
  event.stopPropagation(); 
});

http://jsfiddle.net/bLdtz/

jQuery自定义下拉选择框没有隐藏

3 个答案: