Question

所以我花了很多时间在这上面并且已经到了最后一部分并且似乎无法使我的下拉功能。

我正在使用jQuery悬停。将鼠标悬停在主链接上，子链接显示，内容向下移动，将鼠标悬停在包含子项的子链接上，子子链接出现，内容向下移动一些但是当我将鼠标悬停在子子链接上时，我的内容会重新启动但子子链接仍然可见。

我有一些理论可以帮助我解决这个问题，其中一个是使用子函数而不是两个不同的函数。另一个是使用case语句来移动内容，但我觉得如果我简化我的代码，我也可能最终解决问题。

这是我的jQuery：

$(document).ready(function () {
    $(".main-menu-link").hover(function () {
        $(".main-menu-link").removeClass("active");
        $(this).addClass("active");
        //$(".menu-depth-1").hide();
        $(this).parent().siblings().children('ul').hide();
        //
        $(this).siblings(".menu-depth-1").fadeIn();
        if ($(this).siblings('ul').is(":visible")) {
            $("#index-content").animate({
                'margin-top': 46
            });
            alert('doh');
        } else {
            $("#index-content").animate({
                'margin-top': 10
            });
        }

    });
    $(".sub-menu-link").hover(function () {
        $(".sub-menu-link").removeClass("active");
        $(this).addClass("active");
        $(this).parent().siblings().children('ul').hide();
        $(this).siblings(".menu-depth-2").fadeIn();
        if ($(this).siblings('ul').is(":visible")) {
            $("#index-content").animate({
                'margin-top': 92
            });
        } else {
            $("#index-content").animate({
                'margin-top': 46
            });
        }
    });

});

这里是jsfiddle：

http://jsfiddle.net/8tcQT/4/

感谢您的帮助和感谢阅读。

C

Answer 1

$(".sub-menu-link").hover(function () {

此行是子子链接导致内容向上移动的原因，因为子链接和子子链接< / em>触发悬停功能。

$(".sub-menu-link").hover(function () { $(".sub-menu-link").removeClass("active"); $(this).addClass("active"); // I added the following line: $(this).siblings().find('.sub-menu-link').off('mouseenter mouseleave'); $(this).parent().siblings().children('ul').hide(); $(this).siblings(".menu-depth-2").fadeIn(); if ($(this).siblings('ul').is(":visible")) { $("#index-content").animate({ 'margin-top': 92 }); } else { $("#index-content").animate({ 'margin-top': 46 }); } });

添加了代码行后，当他们的父子链接首次悬停时，它会从子子链接中删除悬停功能。

或者，为子子链接使用其他类名而不是class="sub-menu-link"。

请注意，我的解决方案仅解决在子子链接级别发现的问题。如果需要更深层次的链接列表，即子子链接和子子 - 子链接，则创建“子功能”如你所说，将是更可取的。

无法完成下拉菜单

1 个答案: