自定义 jQuery 下拉导航嵌套焦点问题

Question

为什么在创建定制的 jQuery 脚本时我总是遇到一个问题让我退缩！

不管怎么说，我正在向你们所有人伸出援手，希望有一个善良的灵魂能告诉我我做错了什么。

问题

我为一个站点创建了一个下拉 jQuery 导航菜单，当我尝试将光标从父级移动到嵌套子级并运行“隐藏（）”时，只有菜单认为鼠标正在离开“目标” ' 使下拉菜单消失的函数。

我需要的是 .dropnav 元素（下拉菜单）在上述情况发生时不触发 '$target.on('mouseover', function(e) {' 部分代码。

真的卡住了，所以非常感谢任何帮助。

jQuery 代码

var hover, $this;

        $target = $("header nav > ul > li");
        $menu = $target.find('.dropnav');


        $target.on('mouseover', function(e) {
            e.stopPropagation();
            clearTimeout(hover);

            $this = $(this)
            $this.toggleClass('active');

            hide();

            hover = setTimeout(show,400);

        }).mouseout(function() {
            clearTimeout(hover);
            hover = setTimeout(hide,800);
        });

        if($(".dropnav:visible")) {
            $menu.click(function(e) { e.stopPropagation(); });
            $(document).click(function() { hide(); });
        }

        function show() {
            $this.children('.dropnav').slideDown(800);
        }

        function hide() {
            $('.dropnav:visible').fadeOut(200);
        }

HTML 代码

<header>
<div id="nav-filler"></div>
<div id="header-inner">
    <nav>
        <ul>
            <li>
                <a id="products" title="Browse our products">Products</a>
                <div class="dropnav">
                    <div id="dropnav-filler"></div>
                    <div id="dropnav-inner">
                        <ul id="products-menu" class="dropnav-links">
                            <li>
                                <h6>Desktops</h6>
                                <ul>
                                    <li><a href="/products/desktops/pc-one" title="Broadleaf">PC One</a></li>
                                    <li><a href="/products/desktops/pc-access" title="Broadleaf">PC Access</a></li>
                                    <li><a href="/products/desktops/pc-max" title="Broadleaf">PC Max</a></li>
                                    <li><a href="/products/desktops/pc" title="Flex">PC</a></li>
                                    <li><a href="/products/desktops/all-in-one" title="All In One">All In One</a></li>
                                </ul>
                                <h6>Workstations</h6>
                                <ul>
                                    <li><a href="/products/workstations/pcx" title="Broadleaf X">PC X</a></li>
                                    <li><a href="/products/workstations/d4-rhino" title="D4 Rhino">D4 Rhino</a></li>
                                    <li><a href="/products/workstations/d4-3ds" title="D4 3DS">D4 3DS</a></li>
                                    <li><a href="/products/workstations/d4-inventor" title="D4 Inventor">D4 Inventor</a></li>
                                    <li><a href="/products/workstations/rackstation" title="Rackstation">Rackstations</a></li>
                                </ul>
                            </li>
                            <li>
                                <h6>On The Go</h6>
                                <ul>
                                    <li><a href="/products/onthego/laptops" title="Laptop">Laptops</a></li>
                                    <li><a href="/products/onthego/tablets" title="Tablet">Tablets</a></li>
                                    <li><a href="/products/onthego/ultrabooks" title="Ultrabook">Ultrabooks</a></li>
                                </ul>
                            </li>
                        </ul>
                        <div id="showcase">
                            <div id="sc-inner"></div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <a id="products" title="Browse our products">Other Products</a>
                <div class="dropnav">
                    <div id="dropnav-filler"></div>
                    <div id="dropnav-inner">
                        <ul id="products-menu" class="dropnav-links">
                            <li>
                                <h6>Desktops</h6>
                                <ul>
                                    <li><a href="/products/desktops/pc-one" title="Broadleaf">PC One</a></li>
                                    <li><a href="/products/desktops/pc-access" title="Broadleaf">PC Access</a></li>
                                    <li><a href="/products/desktops/pc-max" title="Broadleaf">PC Max</a></li>
                                    <li><a href="/products/desktops/pc" title="Flex">PC</a></li>
                                    <li><a href="/products/desktops/all-in-one" title="All In One">All In One</a></li>
                                </ul>
                                <h6>Workstations</h6>
                                <ul>
                                    <li><a href="/products/workstations/pcx" title="Broadleaf X">PC X</a></li>
                                    <li><a href="/products/workstations/d4-rhino" title="D4 Rhino">D4 Rhino</a></li>
                                    <li><a href="/products/workstations/d4-3ds" title="D4 3DS">D4 3DS</a></li>
                                    <li><a href="/products/workstations/d4-inventor" title="D4 Inventor">D4 Inventor</a></li>
                                    <li><a href="/products/workstations/rackstation" title="Rackstation">Rackstations</a></li>
                                </ul>
                            </li>
                            <li>
                                <h6>On The Go</h6>
                                <ul>
                                    <li><a href="/products/onthego/laptops" title="Laptop">Laptops</a></li>
                                    <li><a href="/products/onthego/tablets" title="Tablet">Tablets</a></li>
                                    <li><a href="/products/onthego/ultrabooks" title="Ultrabook">Ultrabooks</a></li>
                                </ul>
                            </li>
                        </ul>
                        <div id="showcase">
                            <div id="sc-inner"></div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </nav>
</div>

http://jsfiddle.net/kYkba/11/ 链接供任何可以访问的人使用。

提前致谢。

Answer 1

使用 mouseenter/mouseleave 代替 mouseover/mouseout :)

编辑

你也应该改变

}).mouseout(function() {

到

}).on('mouseleave',function() {

Answer 2

看到当你mouseover li 时它会显示，但是当你去选择.dropnav 它fadeOut 中的某个项目时，试试这个：

var $target = $("header nav > ul > li");
$target.hover(function (e) {
   $('> .dropnav', this).slideDown();
},function () {
   $('> .dropnav', this).fadeOut();
});

Demo