0

我有一堆嵌套的 div、ul 等。结构如下所示。

<script>
$(document).ready(function() {
    $('#top-level').mouseover( function() {
        $( this ).find('.action').show();
        $( this ).find('.drop').show('slide');
    });
    $('#top-level').mouseout( function(){
        $( this ).find('.drop').hide('blind', function(){
            $('.action').hide();
        });
    });
</script>

<div id="top-level">
    <div>
        <div class="action" style="display:none;">
            <ul class="drop" style="display:none;">
                <li>Text Here</li>
                <li>Text Here</li>
                <li>Text Here</li>
            </ul>       
        </div>
    </div>
</div>

此处显示的 ul 正在滚动显示。.drop css 设置为 position:absolute 以便它出现在顶级 div 上。

所以，ul drop 看起来不错，但是一旦它与鼠标光标接触，它就会发疯（不停地上下百叶窗等）！现在这将与鼠标在某种程度上失去焦点有关。

为了让这种效果正常工作，我应该怎么做？我希望能够滚动 div 并在它出现后从下拉 ul 中选择选项。

提前致谢。

4

4 回答 4

2

http://jsfiddle.net/PDdKL/

改用悬停：

$(document).ready(function() {
    $('#top-level').hover( function() {
        $( this ).find('.action').show();
        $( this ).find('.drop').show('slide');
    }, function(){
        $( this ).find('.drop').hide('blind', function(){
            $('.action').hide();
        });
    });
});
于 2011-04-21T20:43:16.650 回答
2

使用 mouseenter 和 mouseleave。

    $('#top-level').mouseenter( function() {
        $( this ).find('.action').show();
        $( this ).find('.drop').show('slide');
    });
    $('#top-level').mouseleave( function(){
        $( this ).find('.drop').hide('blind', function(){
            $('.action').hide();
        });
    });
于 2011-04-21T20:51:57.273 回答
0

您可以$(element).stop();在每个事件处理程序的开头使用来停止该元素上的动画。

于 2011-04-21T20:44:52.537 回答
0

我做了这样的东西供某人在这里查看；

http://jsfiddle.net/RyanAdriano/AWm66/8/

于 2011-04-21T20:47:58.667 回答