jquery - 带有选项选择的 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 再次滑动，可能是因为我的鼠标离开了 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/