jQuery自定义下拉选择框未隐藏

jQuery custom dropdown select box not hiding

本文关键字：隐藏 选择 自定义 jQuery      更新时间：2023-09-26

我有一个按钮"button"，可以激活下拉框"box"：

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

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

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

现在我想实现一个模糊，这样当用户点击下拉框以外的东西时，框就会隐藏起来。

但是

现在，当我在下拉列表打开时单击按钮时，它会关闭并重新打开。我觉得自己陷入了第二十二条军规。

问题是，当我在下拉菜单打开的情况下单击按钮时，blur和.click都会启动。

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

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

http://jsfiddle.net/bLdtz/

尝试

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

$('.box').blur(function()
{  
    if($(this).is(":visible"))    
     $(this).toggle();
});
相关文章：