Question

我想创建一个像http://www.indochino.com上使用的响应式多列菜单，有谁知道怎么做？我的出发点应该是这个脚本：http://codepen.io/bradfrost/pen/IEBrz

非常感谢你，乔治

Answer 1

查看jQuery方法.hover，.mousein，.mouseout，.mouseenter和.mouseleave。

当用户的鼠标移过导航链接时，您将使用jQuery的.css，'。animate`等方法之一来显示/隐藏菜单。当他们的鼠标同时离开导航链接和菜单时，您将需要再次使用方法（可能与之前相同）来隐藏菜单。

以下是一个例子：

$(document).ready(function() {
    var $navLink = $("#navLink"); //for sake of ease, I will assume you have only one menu, as in the example site
    var $subMenu = $("#subMenu"); // see the above comment

    //global flags
    var overLink = false; 
    var overMenu = false;

    function checkAndHide() {
        if (!overLink && !overMenu) {
            $subMenu.css("display", "none");  

            $subMenu.off("mouseleave.hide");
            $navLink.off("mouseleave.hide");

            $navLink.on("mouseenter.show", function() { 
                overLink = true;
                displayMenu();
            });

        }
    }

    function displayMenu() {
        $subMenu.css("display", "inline-block");

        $navLink.off("mouseenter.show");
        //this is where you have some major implementation decisions
        //for sake of ease, I will simply use some global flags

        $navLink.on("mouseleave.hide", function() { 
            overLink = false;
            checkAndHide(); 
        });
        $subMenu.on("mouseleave.hide", function() {
            overMenu = false; 
            checkAndHide(); 
        });
    };

    $subMenu.on("mouseenter.updateFlag", function() { 
        overMenu = true;
    });

    $navLink.on("mouseenter.updateFlag", function() {
        overLink = true;
    });

});

以上是一个非常非常粗略的可能解决方案草案。这不是你应该简单地复制和粘贴的东西，但它应该让你知道你应该尝试做什么。我使用了很多.on和.off调用，因为你应该这样做，以节省调用你不再需要的处理程序的开销。然而，最重要的是打开和关闭.mouseenter的{{1}}处理程序，因为您可能决定使用（或将来，更改为）可能的效果在元素上明显重复（如滑动，然后再次向下滑动）。在我的示例中，这不是很重要，但可能是基于您的实现。

祝你好运！：）

使用jquery的响应式多列弹出菜单

1 个答案: