将鼠标悬停在选择下拉菜单上时，包含 div 会失去焦点

Question

我有一个 div，当您将鼠标悬停在其容器上时会出现一个 div，并且该 div 是绝对定位的，因此它会出现在其容器之外。它里面有多个选择下拉菜单，当我尝试更改其中任何一个的值时，焦点会丢失，它会触发容器上的鼠标移出。

我在这里设置了这个问题的工作示例：
http://jsfiddle.net/uBjR3/2/

这个问题出现在 FireFox 和 IE 中（Chrome 似乎可以正常工作）。

=====

HTML：

<div class="container">
    <div class="dropdown">
        <select>
            <option>option 1</option>
            <option>option 2</option>
            <option>option 3</option>
            <option>option 4</option>
        </select>
    </div>
</div>

CSS：

.container { background-color: red; height: 30px; width: 60px; padding: 20px; position: relative; }

.dropdown { background-color: blue; height: 300px; width: 200px; padding: 20px; position: absolute; top: 70px; left: 0px; display: none; }

jQuery:

$('.container').hover(
  function () {
    $('.dropdown').show();
  },
  function () {
    $('.dropdown').hide();
  }
);

Answer 1

我刚刚看了你的代码。用这个替换你的 jQuery，它会按照你的意愿工作

$(document).ready(function(){

      $('.container').hover(function(){
      $('.dropdown').stop(1).slideDown();
   },function(){
      $(".dropdown").stop(1).slideUp();
   }); 

});

这是工作演示 http://jsfiddle.net/kevinPHPkevin/uBjR3/11/

Answer 2

您可以使用超时来阻止隐藏操作。比如：

var timer;
$('PARENT')
    .on(
        mouseenter: function() {
            clearTimeout(timer);
            $('.dropdown').show();
        },
        mouseleave: function() {
            timer = setTimeout(function() {
                $('.dropdown').hide();
            }, 400);
        }, '.container')
    .on(
        mouseenter: function() {
            clearTimeout(timer);
        },
        mouseleave: function() {
            timer = setTimeout(function() {
                $('.dropdown').hide();
            }, 400);
        }, '.dropdown');