关闭多级jquery下拉菜单

时间:2013-02-14 06:49:52

标签: javascript jquery html css

我有一个下拉菜单,可以扩展点击次数而不是悬停。问题是,当我打开子菜单时,我无法让它们关闭,因为我将鼠标从当前子菜单移动到它的父菜单。它应该隐藏上一个菜单一直到导航栏(顶部),并在我离开任何子菜单并将鼠标悬停在页面正文上时隐藏所有菜单。

小提琴:http://jsfiddle.net/WjE9y/11/

HTML:

<!-- <LINK REL="SHORTCUT ICON" HREF="favicon.ico"> -->
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="includes/menu.js"></script></script>
    <link type="text/css" href="includes/menu.css" rel="stylesheet" />
</head>
<body>
    <div style="z-index:100;width:100%;position:fixed;top:0;left: 0;min-width:1000px;">
        <div id="menuJQ">
            <ul class="menuJQ">
                <li class="parent"><a href="#"><span>Home</span></a></li>
                <li><a class="parent" href="#"><span>Product View</span></a> 
                    <div>
                        <ul>
                            <li><a href="#"><span>DevTask Search</span></a></li>
                            <li><a href="#"><span>Active Machines</span></a></li>
                        </ul>
                    </div>
                </li>
                <li class="parent"><a href="#"><span>Request Tool</span></a></li>
                <li><a href="#" class="parent"><span>Search</span></a>
                    <div>
                        <ul>
                            <li><a href="#"><span>DevTask Search</span></a></li>
                            <li><a href="#"><span>Active Machines</span></a></li>
                            <li><a href="#"><span>Integrity Query</span></a></li>
                            <li><a href="#"><span>Internal DevTasks</span></a></li>
                            <li><a href="#" class="parent"><span>Results</span></a>
                                <div>
                                    <ul>
                                        <li><a href="#" target='_blank'><span>Latest Smoke Results</span></a></li>
                                        <li><a href="#" target='_blank'><span>Latest Smoke Results</span></a>
                                            <div>
                                                <ul>
                                                    <li><a href="#"><span>DevTask Search</span></a></li>
                                                    <li><a href="#"><span>Active Machines</span></a></li>
                                                    <li><a href="#"><span>Integrity Query</span></a></li>
                                                </ul>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#"><span>Issues for Stability Team</span></a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>  


JS:

$(document).ready(function(){
    $(function() {
            $('#menuJQ > ul li').click(function(e) {
                e.preventDefault();
                $('ul:first', this).show();
            });
        });

    var submenu_active = false;
     $('#menuJQ ul').mouseenter(function() {
        submenu_active = true;      
     });

    $('#menuJQ ul').mouseleave(function() {
        submenu_active = false;
        setTimeout(function() { 
            if (submenu_active === false) $('ul', this).hide("fast");});
    });
});

1 个答案:

答案 0 :(得分:0)

我会给包含任何子菜单的div一个像submenu这样的类:

 ...
 <li><a href="#" class="parent"><span>Search</span></a>
     <div id="submenu">
        <ul>
           ...

然后你可以这样做:

$(document).ready(function(){
    $(function() {
            $('#menuJQ > ul li').click(function(e) {
                e.preventDefault();
                $('ul:first', this).show();
            });
        });

    $('.submenu').mouseleave(function() {
        $('ul', this).hide("fast");
    });
});

Fiddle here