用jQuery实现这种风格的下拉菜单

Question

我在浏览网页时发现了此网站。我注意到导航栏下拉菜单的工作原理，并且我想在我的网站上实现类似的功能。

查看页面的源代码后，我发现这些下拉区域包含在 fOut 类的 div 中。

事实证明，这是通过 MooTools 完成的。 这是脚本本身（在原始页面中引用后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;

        }
    });


});

---

我的问题

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

1. 它是如何工作的？我不太明白它在使用 iframe 等做什么。
2. 如何在 jQuery 中实现这一点？

Answer 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）并设置其余的以匹配它的高度。