嗨,我已经创建了以下菜单结构:

<div id="menu">
<ul>
<li><a href="#">Main Item1</a></li>
<li><a href="#">Main Item2</a></li>
<li><a href="#">Main Item3</a>
    <ul>
    <li><a href="#">SubItem for MainItem3</a></li>
    <li><a href="#">2ndSub for MainItem3</a></li>
    </ul>
</li>
<li><a href="#">Main Item4</a>
    <ul>
    <li><a href="#">SubItem for MainItem4</a></li>
    <li><a href="#">2ndSub for MainItem4</a></li>
    </ul>
</li>
</ul>
</div>

这就是我的菜单结构。现在我想使用jQuery最新作的效果基本show /了slideDown效果。

我做这样:

$(document).ready(function(){
    $('#menu ul li:has(ul)').mouseenter(function(){         
                $('#menu ul li ul').slideDown('slow');                              
    }).mouseleave(function(){
        $('#menu ul li ul').slideUp('slow');
    });
});

我第一次尝试鼠标悬停及移出,但是当我使用的功能,鼠标悬停的工作,当我想要去子,菜单滑动,但mouseOut事件occours。现在它的工作,但是当我悬停例如在主要项目3,替补也从主要项目4打开和关闭鼠标移开时?!?!怎么说仅从例如菜单项主项目3奥德主项目4 ???

希望你明白我的意思吗?

由于

有帮助吗?

解决方案

$(function(){
    $('#menu ul li:has(ul)').hover(function(){                 
            $(this).find('ul').slideDown('slow');                                                          
    }, function(){
            $(this).find('ul').slideUp('slow');
    });
});
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top