Question

我试图让以下网站上的导航功能正常工作。link

到目前为止，我在JSFIDDLE上有以下代码，并且它有点工作。唯一的问题是当第二次将鼠标悬停在子菜单上时（或循环使用它们）时，新的背景div不会再次下降。

非常感谢任何建议 - 谢谢

修改

我已将此处的演示jsfiddle.net/XLZGP/11简化为主菜单项。我正在寻找新的颜色，而旧的颜色不会滑动。

代码如下

HTML

<header>
<div class="inner-header">
    <nav>
        <ul>
            <li class="parent"> <a href="#" title="bus">bus</a>

                <div class="locations-wrapper">
                    <ul class="sub-menu">
                        <li><a href="#" title="station">station</a>

                        </li>
                        <li><a href="#" title="stop">stop</a>

                        </li>
                    </ul>
                </div>
            </li>
            <li class="parent"> <a href="#" title="train">train</a>

                <div class="locations-wrapper">
                    <ul class="sub-menu">
                        <li><a href="#" title="station">station</a>

                        </li>
                        <li><a href="#" title="stop">stop</a>

                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>
</div>
<div class="boxes">
    <div class="bus"></div>
    <div class="bus-station"></div>
    <div class="bus-stop"></div>
    <div class="train"></div>
    <div class="train-station"></div>
    <div class="train-stop"></div>
</div>
</header>

JS

var parentList = $('.parent');
var currentTitle;
var currentChildTitle;

parentList.on('mouseover', function () {
    $(this).find('.locations-wrapper').slideDown(400);
    currentTitle = $(this).find('a').attr('title');
    $('.' + currentTitle).addClass('open').slideDown(400);

});

parentList.on('mouseleave', function () {
    $(this).find('.locations-wrapper').slideUp(400);
    $('.boxes').children('div').removeClass('open').slideUp(400);
});

$('.sub-menu').on('mouseover', 'li', function () {
    currentChildTitle = $(this).find('a').attr('title');
    currentChildTitle = currentTitle + '-' + currentChildTitle;
    $('.boxes').children('div').removeClass('open');
    $('.' + currentChildTitle).addClass('open').slideDown(400);
});`

Answer 1

我认为你正在寻找的是更接近这一点，http://jsfiddle.net/un5ke/1/

var mouseLeft = true;

$('.sub-menu').on('mouseleave', 'li', function () {
    mouseLeft = true;
    setTimeout(function() {
        if (mouseLeft) {
            var toClose = $('.boxes').children('div.open');
            toClose.slideUp();
            toClose.removeClass('open');
        }
    }, 500);
});

$('.sub-menu').on('mouseover', 'li', function () {
    mouseLeft = false;

    currentChildTitle = $(this).find('a').attr('title');
    currentChildTitle = currentTitle + '-' + currentChildTitle;
    var toOpen = $('.' + currentChildTitle);

    if (!toOpen.hasClass('open')){
        var toClose = $('.boxes').children('div.open');

        toOpen.addClass('open').slideDown(400, function completed () {
           $(toClose).slideUp();               
           $(toClose).removeClass('open');
        });
    }
});

我做了几件事：

从公开课
为鼠标离开添加了半秒钟的延迟，这样如果这个人从一个人徘徊到另一个人，那么背景就不会发疯。
删除整个菜单的鼠标，因为此刻不是问题。
在打开之前仔细检查当前菜单是否已经打开。

Answer 2

您的子菜单项目没有mouseleave处理程序，因此一旦他们关闭，他们就会失败。

我为子菜单添加了一个快速的mouseleave - 也应该是你想达到的确切效果的首发：

http://jsfiddle.net/XLZGP/

$('.sub-menu').on('mouseleave', 'li', function () {
    currentChildTitle = $(this).find('a').attr('title');
    currentChildTitle = currentTitle + '-' + currentChildTitle;
    $('.' + currentChildTitle).removeClass('open').slideUp(400);
});

Answer 3

采用不同的方法并决定通过JS动态创建向下滑动div背景 - 创建每个dom节点，然后将其分配给dom，限制生成的总数。

用下一个div覆盖每个div。工作 JSFIDDLE

var parentList = $('.parent');

// declare variables
var currentChildTitle;
var currentTitle;
var banner;

// setup append div function
function dropBanner(currentTitle) {
    // create the banner variable dom node
    banner = $('<div class="' + currentTitle + '"/></div>');
    // add it to the dom
    $('.boxes').append(banner);
    // animate it
    $('.' + currentTitle).slideDown(300);
}

// setup a function to limit the number of divs appended
function chop() {
    if ($('.boxes div').length > 15) {
        $('.boxes div').eq(0).remove();
    }
}

// listen for mouseover the parent list items
parentList.on('mouseover', function (e) {

    if (!($(this).find('.locations-wrapper').is(':visible'))) {
        $(this).find('.locations-wrapper').slideDown(300);
    }

    // grab the current list item title
    currentTitle = $(this).find('a').attr('title');

    // call dropBanner passing the current list item title 
    dropBanner(currentTitle);
    chop();

});

// listen for mouseleave
parentList.on('mouseleave', function () {
    $(this).find('.locations-wrapper').delay(300).slideUp(300);
    $('.boxes div').delay(300).slideUp(300);
});

// listen for mouseover the submenu list items
$('.sub-menu').on('mouseover', 'li', function (e) {

    // grab the current list item title
    currentTitle = $(this).find('a').attr('title');

    // call dropBanner passing the current list item title 
    dropBanner(currentTitle);
    chop();

    // stop the bubbling up effect to parent list items
    e.stopPropagation();
});

slideDown jQuery Navigation divs

3 个答案: