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! ;)
  }  
});

创建下拉组合框的问题

1 个答案:

jsBin demo