1

所以我在这方面花了很多时间，已经到了最后一部分，似乎无法实现我的下拉功能。

我正在使用 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

4

1 回答 1

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

这条线是子子链接导致内容向上移动的原因，因为子链接和子子链接都会触发该悬停功能。

$(".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"for sub-sub-links。

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

于 2013-05-22T01:50:27.143 回答