Question

我有以下标记：

<select style="display:none">
    <option value='1'>1</option>
    <option vlaue='2'>2</option>
</select>
<input type="text" id="comboBox" />
<ul id="comboBoxData" style="display:none">
    <li id='1'>1</li>
    <li id='2'>2</li>
</ul>

以及以下JQuery代码：

$(document).ready(function() {
    $('select').each(function() {
        var parent = this;
        $('#comboBoxData').on('click', 'li', function() {
            var value = $(this).prop('id');
            $(parent).val(value);
            $('#comboBox').val(value);
        });
    });   
    $('#comboBox').bind('focusin', function () {
        $('#comboBoxData').show();
    });   
    $('#comboBox').bind('focusout', function () {
        $('#comboBoxData').hide();
    });
});

当我点击其中一个LI时，'comboBoxData'元素在单击触发器发生之前消失。有没有办法围绕这个或替代事件，我可以使用它来获得与焦点相同的效果？

Answer 1

输入mouseenter和mouseleave事件并更改全局变量的值，例如isOver。

$('select').each(function() {
    var parent = this;
    $('#comboBoxData').on('click', 'li', function() {
        var value = $(this).prop('id');
        $(parent).val(value);
        $('#comboBox').val(value);
        $('#comboBoxData').hide();
    });
}); 
$('#comboBoxData').mouseover(function(){
    isOver = true;
}).mouseleave(function(){
    isOver = false;
});
$('#comboBox').bind('focusin', function () {
    $('#comboBoxData').show();
});   
$('#comboBox').bind('focusout', function () {
    if(!isOver){
        $('#comboBoxData').hide();
    }
});

Answer 2

您不需要：

 $('#comboBox').bind('focusout', function () {
        $('#comboBoxData').hide();
 });

而是在$('#comboBoxData').on('click', 'li', function() {

中使用它

如果你对插件很好，你可以这样使用：

$('#menu').bind('clickoutside', function (event) {
    $(this).hide();
});

你可以获得该插件 here

另外，我在不使用插件的情况下更改了代码：请检查更新的答案：

DEMO

Answer 3

尝试使用blur()功能

$('#comboBox').blur(function () {
        $('#comboBoxData').hide();
    });

模糊事件在失去焦点时会发送到元素。

来自http://api.jquery.com/blur/

Answer 4

不完全优雅但有效。

$("body").click(function(event){   
    if(!$(event.target).is("#comboBoxData") && !$(event.target).is("#comboBox") ){    
        $("#comboBoxData").hide(); }
}); 


$(document).ready(function() {
    $('select').each(function() {
        $('#comboBoxData').on('click', 'li', function() {
        var value = $(this).prop('id');
                $('#comboBox').val(value);
           $('#comboBoxData').hide();
        });
    });   

    $('#comboBox').bind('focusin', function () {
    $('#comboBoxData').show();
  });
});

单击元素后如何触发'焦点'？

4 个答案: