Question

我正在努力开发像Godaddy那样的大型菜单。我已经实现了这种向下滑动和向上滑动的效果等。但是我不确定，当子菜单中的项目悬停时，如何让这个子菜单停留，（现在，它一旦我拿走我的子菜单就会滑动子菜单鼠标移出顶部菜单项（因为鼠标输出应该这样做））？我的HTML和JS看起来像：

<div class="nav-wrap">
<ul class="group main-nav">
    <li><a href="#" data-subnav="define-subnav" class="nav-item">Definitions</a></li>
    <li><a href="#" data-subnav="voucher-subnav" class="nav-item">Vouchers</a></li>
    <li><a href="#" data-subnav="final-subnav" class="nav-item">Final</a></li>
    <li><a href="#" data-subnav="reports-subnav" class="nav-item">Reports</a></li>
</ul>
<ul class="nav-down-content sub-nav">
    <li id="define-subnav">
        <div class="nav-item-content group">
            <div class="nav-chunk">
                <h2>Definitions</h2>
            </div>
            <div class="nav-chunk">
                <ul>
                    <li><a href="#">Party</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Godown</a></li>
                    <li><a href="#">Account Level</a></li>
                </ul>
            </div>
            <div class="nav-chunk">
                <ul>
                    <li><a href="#">Party</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Godown</a></li>
                    <li><a href="#">Account Level</a></li>
                </ul>
            </div>
        </div>
    </li>
    <li id="voucher-subnav">
        <div class="nav-item-content group">
            <div class="nav-chunk">
                <h2>Vouchers</h2>
            </div>
            <div class="nav-chunk">
                <ul>
                    <li><a href="#">Party</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Godown</a></li>
                    <li><a href="#">Account Level</a></li>
                </ul>
            </div>
            <div class="nav-chunk">
                <ul>
                    <li><a href="#">Party</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Godown</a></li>
                    <li><a href="#">Account Level</a></li>
                </ul>
            </div>
        </div>
    </li>
    <li id="final-subnav">
        <div class="nav-item-content group">
            <div class="nav-chunk">
                <h2>Finals</h2>
            </div>
            <div class="nav-chunk">
                <ul>
                    <li><a href="#">Party</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Godown</a></li>
                    <li><a href="#">Account Level</a></li>
                </ul>
            </div>
            <div class="nav-chunk">
                <ul>
                    <li><a href="#">Party</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Godown</a></li>
                    <li><a href="#">Account Level</a></li>
                </ul>
            </div>
        </div>
    </li>
    <li id="reports-subnav">
        <div class="nav-item-content group">
            <div class="nav-chunk">
                <h2>Reports</h2>
            </div>
            <div class="nav-chunk">
                <ul>
                    <li><a href="#">Party</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Godown</a></li>
                    <li><a href="#">Account Level</a></li>
                </ul>
            </div>
            <div class="nav-chunk">
                <ul>
                    <li><a href="#">Party</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Godown</a></li>
                    <li><a href="#">Account Level</a></li>
                </ul>
            </div>
        </div>
    </li>
</ul>

这是javascript：

$(function(){
    $('.main-nav>li>a').on('mouseover', function (){
        var navContentId = $(this).data('subnav');
        $('#'+navContentId).slideDown();    
    });

    $('.main-nav>li>a').on('mouseout', function (){
        var navContentId = $(this).data('subnav');
        $('#'+navContentId).slideUp();  
    });
});

Jsfiddle：http://jsfiddle.net/G6Dyn/

Answer 1

最后，在stop上slideDown和mouseover以及stop上的slidUp和mouseout设置了子菜单。这就是我的意思：

$('.sub-nav>li').on('mouseover', function (){
    $(this).stop().slideDown();
});

$('.sub-nav>li').on('mouseout', function (){
    $(this).stop().slideUp();
});

超级菜单：子菜单项不会停留

1 个答案: