/*** menu-aim is a jQuery plugin for dropdown menus that can differentiate* between a user trying hover over a dropdown item vs trying to navigate into* a submenu's contents.** menu-aim assumes that you have are using a menu with submenus that expand* to the menu's right. It will fire events when the user's mouse enters a new* dropdown item *and* when that item is being intentionally hovered over.** __________________________* | Monkeys  >|   Gorilla  |* | Gorillas >|   Content  |* | Chimps   >|   Here     |* |___________|____________|** In the above example, "Gorillas" is selected and its submenu content is* being shown on the right. Imagine that the user's cursor is hovering over* "Gorillas." When they move their mouse into the "Gorilla Content" area, they* may briefly hover over "Chimps." This shouldn't close the "Gorilla Content"* area.** This problem is normally solved using timeouts and delays. menu-aim tries to* solve this by detecting the direction of the user's mouse movement. This can* make for quicker transitions when navigating up and down the menu. The* experience is hopefully similar to amazon.com/'s "Shop by Department"* dropdown.** Use like so:**      $("#menu").menuAim({*          activate: $.noop,  // fired on row activation*          deactivate: $.noop  // fired on row deactivation*      });**  ...to receive events when a menu's row has been purposefully (de)activated.** The following options can be passed to menuAim. All functions execute with* the relevant row's HTML element as the execution context ('this'):**      .menuAim({*          // Function to call when a row is purposefully activated. Use this*          // to show a submenu's content for the activated row.*          activate: function() {},**          // Function to call when a row is deactivated.*          deactivate: function() {},**          // Function to call when mouse enters a menu row. Entering a row*          // does not mean the row has been activated, as the user may be*          // mousing over to a submenu.*          enter: function() {},**          // Function to call when mouse exits a menu row.*          exit: function() {},**          // Selector for identifying which elements in the menu are rows*          // that can trigger the above events. Defaults to "> li".*          rowSelector: "> li",**          // You may have some menu rows that aren't submenus and therefore*          // shouldn't ever need to "activate." If so, filter submenu rows w/*          // this selector. Defaults to "*" (all elements).*          submenuSelector: "*",**          // Direction the submenu opens relative to the main menu. Can be*          // left, right, above, or below. Defaults to "right".*          submenuDirection: "right"*      });** https://github.com/kamens/jQuery-menu-aim* @mcmurphy fixed some bug in this plugin.
*/
(function ($) {$.fn.menuAim = function (opts) {//cache current menuSelector @mcmurphyopts.menuSelector = $(this).selector; // Initialize menu-aim for all elements in jQuery collectionthis.each(function () {init.call(this, opts);});return this;};function init(opts) {var $menu = $(this),activeRow = null,mouseLocs = [],lastDelayLoc = null,timeoutId = null,activeMenuSelector = null,   //current active submenu @mcmurphymenuSelector = opts.menuSelector, //cache row menu selector @mcmurphyleaveMenu = false,              //cache if the mouse leave the menu bound @mcmurphyoptions = $.extend({rowSelector: "> li",submenuSelector: "*",submenuDirection: "right",tolerance: 75,  // bigger = more forgivey when entering submenu
                enter: $.noop,exit: $.noop,activate: $.noop,deactivate: $.noop,exitMenu: $.noop}, opts);var MOUSE_LOCS_TRACKED = 3,  // number of past mouse locations to trackDELAY = 300;  // ms delay when user appears to be entering submenu/*** Keep track of the last few locations of the mouse.*/var mousemoveDocument = function (e) {mouseLocs.push({ x: e.pageX, y: e.pageY });if (mouseLocs.length > MOUSE_LOCS_TRACKED) {mouseLocs.shift();}/*fix bug:when mouse move out the main-menu and the sub-menu area,hide the sub-menu@mcmurphy*/var rootMenuObj = $(e.target).closest(menuSelector);var rootSubmenuObj = $(e.target).closest(activeMenuSelector);if ((rootMenuObj.length === 0) && (rootSubmenuObj.length === 0)) {if (activeRow) {options.deactivate(activeRow); activeRow = null;leaveMenu = false;}}};/*** Cancel possible row activations when leaving the menu entirely*/var mouseleaveMenu = function () {if (timeoutId) {clearTimeout(timeoutId);}// If exitMenu is supplied and returns true, deactivate the// currently active row on menu exit.if (options.exitMenu(this)) {if (activeRow) {options.deactivate(activeRow); }activeRow = null;}};/*** Trigger a possible row activation whenever entering a new row.*/var mouseenterRow = function () {if (timeoutId) {// Cancel any previous activation delays
                clearTimeout(timeoutId);}leaveMenu = false;  options.enter(this);possiblyActivate(this);},mouseleaveRow = function () {options.exit(this);};/** Immediately activate a row if the user clicks on it.*/var clickRow = function () {activate(this);};/*** Activate a menu row.*/var activate = function (row) {if (row == activeRow || leaveMenu) {return;}if (activeRow) {options.deactivate(activeRow); }//cache the active submenu @mcmurphyactiveMenuSelector = options.activate(row); activeRow = row;};/*** Possibly activate a menu row. If mouse movement indicates that we* shouldn't activate yet because user may be trying to enter* a submenu's content, then delay and check again later.*/var possiblyActivate = function (row) {var delay = activationDelay();if (delay) {timeoutId = setTimeout(function () {possiblyActivate(row);}, delay);} else {activate(row); //catch the active submenu -- Km
            }};/*** Return the amount of time that should be used as a delay before the* currently hovered row is activated.** Returns 0 if the activation should happen immediately. Otherwise,* returns the number of milliseconds that should be delayed before* checking again to see if the row should be activated.*/var activationDelay = function () {if (!activeRow || !$(activeRow).is(options.submenuSelector)) {// If there is no other submenu row already active, then// go ahead and activate immediately.return 0;}var offset = $menu.offset(),upperLeft = {x: offset.left,y: offset.top - options.tolerance},upperRight = {x: offset.left + $menu.outerWidth(),y: upperLeft.y},lowerLeft = {x: offset.left,y: offset.top + $menu.outerHeight() + options.tolerance},lowerRight = {x: offset.left + $menu.outerWidth(),y: lowerLeft.y},loc = mouseLocs[mouseLocs.length - 1],prevLoc = mouseLocs[0];if (!loc) {return 0;}if (!prevLoc) {prevLoc = loc;}if (prevLoc.x < offset.left || prevLoc.x > lowerRight.x ||prevLoc.y < offset.top || prevLoc.y > lowerRight.y) {// If the previous mouse location was outside of the entire// menu's bounds, immediately activate.leaveMenu = true; //@mcmurphyreturn 0;}if (lastDelayLoc &&loc.x == lastDelayLoc.x && loc.y == lastDelayLoc.y) {// If the mouse hasn't moved since the last time we checked// for activation status, immediately activate.return 0;}// Detect if the user is moving towards the currently activated// submenu.//
            // If the mouse is heading relatively clearly towards// the submenu's content, we should wait and give the user more// time before activating a new row. If the mouse is heading// elsewhere, we can immediately activate a new row.//
            // We detect this by calculating the slope formed between the// current mouse location and the upper/lower right points of// the menu. We do the same for the previous mouse location.// If the current mouse location's slopes are// increasing/decreasing appropriately compared to the// previous's, we know the user is moving toward the submenu.//
            // Note that since the y-axis increases as the cursor moves// down the screen, we are looking for the slope between the// cursor and the upper right corner to decrease over time, not// increase (somewhat counterintuitively).function slope(a, b) {return (b.y - a.y) / (b.x - a.x);};var decreasingCorner = upperRight,increasingCorner = lowerRight;// Our expectations for decreasing or increasing slope values// depends on which direction the submenu opens relative to the// main menu. By default, if the menu opens on the right, we// expect the slope between the cursor and the upper right// corner to decrease over time, as explained above. If the// submenu opens in a different direction, we change our slope// expectations.if (options.submenuDirection == "left") {decreasingCorner = lowerLeft;increasingCorner = upperLeft;} else if (options.submenuDirection == "below") {decreasingCorner = lowerRight;increasingCorner = lowerLeft;} else if (options.submenuDirection == "above") {decreasingCorner = upperLeft;increasingCorner = upperRight;}var decreasingSlope = slope(loc, decreasingCorner),increasingSlope = slope(loc, increasingCorner),prevDecreasingSlope = slope(prevLoc, decreasingCorner),prevIncreasingSlope = slope(prevLoc, increasingCorner);if (decreasingSlope < prevDecreasingSlope &&increasingSlope > prevIncreasingSlope) {// Mouse is moving from previous location towards the// currently activated submenu. Delay before activating a// new menu row, because user may be moving into submenu.lastDelayLoc = loc;return DELAY;}lastDelayLoc = null;return 0;};/*** Hook up initial menu events*/$menu.mouseleave(mouseleaveMenu).find(options.rowSelector).mouseenter(mouseenterRow).mouseleave(mouseleaveRow).click(clickRow);$(document).mousemove(mousemoveDocument);};
})(jQuery);

<div class="mainNav"><ul><li></li><li></li></ul>
</div>
<div class="subNav" style="display: none;"></div>
<div class="subNav" style="display: none;"></div>

            $("div.mainNav").menuAim({activate: activateSubmenu,deactivate: deactivateSubmenu,rowSelector:">ul li"});//激活子菜单（示例）function activateSubmenu(row) {var $row = $(row),rowIndex = $("div.mainNav").find("li").index($row),submenuId = $("div.subNav").eq(rowIndex),$submenu = $(submenuId);if ($submenu.length>0) {$submenu.css({display: "block"});$row.addClass("hover");return submenuId;}}//隐藏子菜单（示例）function deactivateSubmenu(row) {var $row = $(row),rowIndex = $("div.mainNav").find("li").index($row),submenuId = $("div.subNav").eq(rowIndex);$(submenuId).css("display", "none");$row.removeClass("hover");return submenuId;}