带有选项选择的 jQuery 选择器 + slideUp + slideDown 无法正常工作

Question

请看一下这个小提琴链接：http://jsfiddle.net/NQqbE/1/

这是我的 jQuery：

$(document).ready(function(){
    $('#B h4').mouseover(function(){
        $('#C').slideDown();
    });

    $('#C').mouseleave(function(){
        $('#C').slideUp();
    }); 
});

我已经设法通过单击“div#B h4”向下滑动“div#C” 但问题是当我再次将鼠标悬停在 div#C 值编号 2-5 内的选择选项元素上时，div#C slideUp，可能是因为我的鼠标离开了 div。

所以我的问题是：无论如何选择那些在 div#C 之外的选项 select 并且 jquery 仍然将其读取为在 div#C 内部，因此 mouseleave 函数不会运行

提前致谢！！

Answer 1

如果你把 C 和 B 分开，它可以工作

<div id="A">
    <div id="B">
        <h4>Show Menu</h4>
    </div>
    <div id="C">
        <p>This is a paragraph</p>
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>        
</div>

$(document).ready(function(){
    $('#B').mouseenter(function(){
        $('#C').slideDown();
    });

    $('#C').mouseleave(function(){
        $('#C').slideUp();
    });

});

小提琴：http://jsfiddle.net/NQqbE/2/