小编Jar*_*ets的帖子

我有一个简单的<select>元素,其中包含以下几个<option>元素:

<select id="dollarAmount">
    <option>select dollar amount</option>
    <option>$5</option>
    <option>$10</option>
    <option>$15</option>
    <option>$20</option>
</select>

<select>只有当用户将鼠标悬停在页面上的另一个元素上时,才会显示此表单:

$("#parentDiv").mouseenter(function(){  
    $("#selectFormDiv").show();  //dollarAmount contained in this div
});

在触发mouseleave事件时parentDiv,我确保表单模糊,以便选项不会保持展开状态.一旦模糊,我可以安全地隐藏包含,<div id="selectFormDiv">以便表格及其容器正确隐藏.

$("#parentDiv").mouseleave(function(){  
    $("#dollarAmount").blur();
    $("#selectFormDiv").hide();
});

我的问题是:这适用于IE8和Firefox 5.1,但不适用于Chrome 12.0或Safari 5.1.我已经检测到浏览器是否是一个webkit并使用不同的命令进行测试,它似乎blur()不会导致<select>表单崩溃(正确的术语？试图隐藏掉落的选项).上面的代码不会隐藏选项,如果他们在离开时扩展parentDiv.触发hide()表单上的事件会隐藏Chrome中的选项(在Opera中仍然没有运气),但当然也会导致整个表单隐藏:

$("#parentDiv").mouseleave(function(){
    if($.browser.webkit) {
        $("#dollarAmount").hide();
        $("#selectFormDiv").hide();
    }
    else {
        $("#dollarAmount").blur();     //blur only triggers for non webkits?
        $("#selectFormDiv").hide();
    }
});

我试过几个其他事件/方法,包括触发document.mouseup时mouseleave触发blur().我试图使用focusout,change和click事件来折叠选择表单,但没有成功. …