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 に答える