jquery - 创建下拉组合框的问题

Question

我正在尝试制作一个下拉组合框(这次不想尝试使用 JQuery 插件)。

这是我的 HTML:

<div style="display: table-cell; width:150px; z-index:-1;" id="supdiv">
        <input size='10' id='supinput'>
            <div id='supsel' style='position:absolute;z-index:0;background-color:#b0c4de;'>
            <input type ='checkbox' value='0' id = 'supplier[]' name='supplier'>A</br>
            <input type ='checkbox' value='1' id = 'supplier[]' name='supplier'>A</br>
            <input type ='checkbox' value='2' id = 'supplier[]' name='supplier'>A</br>
            <input type ='checkbox' value='3' id = 'supplier[]' name='supplier'>A</br>

            <input type='button' value='OK' id='supclose'>
            </div>
</div>

当页面加载时，我隐藏了 supsel div。

$('#supsel').hide();

当焦点来到 supinput 时，我会显示 div。此外，我在单击“确定”按钮时隐藏了 div。

$('#supinput').focus(function(){
            $('#supsel').show()
    }); 
 $('#supclose').click(function(){
            $('#supsel').hide()
    });

现在我的问题是，如果用户单击页面上的其他任何地方或焦点移动到任何其他输入或区域，我想隐藏 div，但我希望 div 一直显示直到用户选择复选框或焦点在 SUPSEL 上。我怎么做？

Answer 1

jsBin demo

</br>应该是<br />
和 <input>应该是 <input />

不仅仅是添加:

$('#supdiv').on('click',function(e){
    e.stopPropagation(); // prevent clicks on your parent div to propagate to doc.
});
$(document).on('click focusout',function(event){   // register clicks focusouts
  if(event.target.id !== 'supdiv'){  // if click was not on your parent bropbox
    $('#supsel').hide();             // than do something about it! ;)
  }  
});