Question

我正在浏览网页并找到this site。我注意到导航栏下拉列表是如何工作的，我想在我的网站上实现类似的东西。

在进入页面的源代码后，我发现这些下拉区域包含在div个类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;

        }
    });


});

我的问题

我对此代码有两个问题。

它是如何运作的？我不太了解它正在做什么，使用iframe和所有。
如何在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取决于您的需要）并设置其余部分以使其与身高相匹配。

在jQuery中完成这种下拉菜单风格

我的问题

1 个答案: