在 jQuery 中实现这种风格的下拉菜单答案

【问题标题】：Accomplishing This Style of Drop-Down Menus in jQuery在 jQuery 中实现这种风格的下拉菜单
【发布时间】：2011-02-17 05:17:42
【问题描述】：

我在浏览网页时发现了this site。我注意到导航栏下拉菜单的工作方式，我想在我的网站上实现类似的功能。

进入页面源代码后，我发现那些下拉区域包含在divs 中，类为fOut。

事实证明，这是通过 MooTools 完成的。 Here is the script itself（在 Mootools 脚本本身之后的原始页面中引用）：

window.addEvent('domready', function() {


    $("primaryNav").getChildren("li").addEvents({
        "mouseenter": function(){
            $(this).addClass("hover").getChildren("a").addClass("hover");
        },
        "mouseleave": function(){
            $(this).removeClass("hover").getChildren("a").removeClass("hover");
        }
    });

    $$(".fOut").each(function(el,i){
        var ifr = $(document.createElement("iframe"));
        ifr.className = "ieBgIframe";
        ifr.frameBorder = "0";
        ifr.src="about:blank";

        ifr.injectInside(el);
        var p = el.getParent();
        p.addClass("hover");
        var h = el.getSize().size.y;
        p.removeClass("hover");
        ifr.height=h;
    });

    $$(".olderVersionsToggle").addEvents({
        "click": function(e){

            var event = new Event(e);
            event.stop();

            var p = $(this).getParent().getNext();

            if(p.hasClass("open")){
                p.removeClass("open");
                $(this).setText("Show previous versions...");
            }
            else{
                p.addClass("open");
                $(this).setText("Hide previous versions...");
            }


            return false;

        }
    });


});

我的问题

我对这段代码有两个问题。

它是如何工作的？我不太明白它在做什么，iframes 等等。
如何在 jQuery 中实现？

【问题讨论】：

标签： javascript jquery html mootools drop-down-menu

【解决方案1】：

它的工作原理与任何其他飞越菜单一样，子菜单是静态定位的，当您将鼠标悬停在菜单项上时，它们会添加悬停状态（类）。它看起来（来自 DOM）就像他们正在使用 iframe 来破解一些 IE 问题。打开一个控制台会话并观察元素以了解我的意思，iframe 不会随着时间而改变，它们只是空置在那里。

至于在 jQuery 中实现它，我将从您的 dom 布局开始（确保所有内容都排在同一区域，并用精心设计的内容填写您的子菜单）。然后只需绑定 mouseenter 和 mouseleave 事件，例如：

$("primaryNav li").mouseenter(function() {$(this).addClass("hover");$("a", this).addClass("hover");});
$("primaryNav li").mouseleave(function() {$(this).removeClass("hover"); $("a", this).removeClass("hover");});

他们使用 iframe 设置元素之间的一致高度（似乎），您可以通过简单地将 div 高度设置为静态量或在渲染每个子菜单后找到最高的一个（使用innerHeight 或 outerHeight 取决于您的需要）并设置其余部分以匹配它的高度。

【讨论】：