0

好的，当我将鼠标悬停在“Link 3”上时，它会打开子子菜单（ex_subnav），但是当我将“Link 3”鼠标移到子菜单中的其他选项时，我还需要关闭 ex_subnav 菜单。使用当前代码它可以工作，但是当我将鼠标从“链接 3”移动到 ex_subnav 菜单时，它会重新加载它，因为$(".ex_dropdown").mouseleave(function(){

<script type="text/javascript">
    $(document).ready(function(){
        $("ul.topnav li a").mouseenter(function() {
            $(this).parent().find("ul.subnav").slideDown('fast').show();
        });  


        $(".dropdown").mouseleave(function(){ 
            $(this).parent().find("ul.subnav").slideUp('fast');
        });

        $(".ex_level").mouseenter(function() {
            $(this).parent().find("ul.ex_subnav").stop(true, true).slideDown('slow').show();
        });

        $(".ex_dropdown").mouseleave(function(){ 
            $(this).parent().find("ul.ex_subnav").stop(true, true).slideUp('slow');
        });
    });

HTML：

<ul class="topnav">  
    <li><a href="#">Home</a></li>  
    <li class="dropdown">  
        <a href="#">About Us</a>  
        <ul class="subnav dropdown">  
            <li><a href="#">Sub Nav Link 1</a></li>  
            <li><a href="#">Sub Nav Link 2</a></li>
            <li><a class="ex_level ex_dropdown" href="#">Link 3</a>
                <ul class="ex_subnav ex_dropdown">
                    <li><a href="#">One</a></li>  
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                    <li><a href="#">Four</a></li>
                </ul>  
            </li>    
        </ul>
    </li>  
</ul>
</script>
4

1 回答 1

0

它正在重新加载，因为

$(".ex_dropdown").mouseleave()<-这适用于

<a class="ex_level ex_dropdown" href="#">

这意味着如果您保留“a”标签，则mouseleave()功能有效。

如果要为子菜单布局设置 mouseleave() 函数，只需更改此行，

<li><a class="ex_level ex_dropdown" href="#">Link 3</a>

像这样在你的html中，

<li class="ex_level ex_dropdown"><a href="#">Link 3</a>

这将解决您的问题。

无样式演示

于 2012-05-02T23:44:47.443 回答