0

Why is it that when creating a bespoke jQuery script I always have one issue that holds me back!

Anyway enough ranting, I am reaching out to you all in the hope one kind soul can show me what I am doing incorrectly.

The Issue

I have created a drop-down jQuery navigation menu for a site, only the menu thinks the mouse is leaving the 'target' when I try and move the cursor from the parent to the nested child and runs a 'hide()' function which makes the drop-down menu disappear.

What I need is for the .dropnav element (drop-down menu) to not trigger the '$target.on('mouseover', function(e) {' part of the code when the above scenario occurs.

Really stuck so any help what-so-ever is greatly appreciated.

jQuery Code

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 Code

<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/ link for any who can access this.

Thanks in advance.

4

2 回答 2

1

看看你什么时候mouseoverli 然后它显示但是当你去选择 it 中的某个项目时.dropnav，fadeOut试试这个：

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

演示

于 2013-04-11T11:23:08.957 回答
1

使用 mouseenter/mouseleave 而不是 mouseover/mouseout :)

编辑

你也应该改变

}).mouseout(function() {

至

}).on('mouseleave',function() {
于 2013-04-11T11:16:12.803 回答