带有选项select的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”，但问题是当我再次将鼠标悬停在值为2-5的div#C slideUp中的select option元素上时，可能是因为我的鼠标离开了div.

所以我的问题是:有没有办法选择这些选项，选择go dont the div#C，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/