1

我有一个下拉菜单，可以在点击时展开而不是悬停。问题是当我打开子菜单时，当我将鼠标从当前子菜单移动到它的父菜单时，我无法关闭它们。一旦我离开它的任何子菜单并将鼠标悬停在页面主体上，它应该一直隐藏上一个菜单直到导航栏（顶部）并隐藏所有菜单。

小提琴：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");});
    });
});
4

1 回答 1

0

我会给div包含任何子菜单的 s 一个类，例如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");
    });
});

在这里拉小提琴。

于 2013-02-14T08:46:48.113 回答