摘要：完整的代碼放在。鼠標事件組件通過點擊打開菜單，不符合大菜單場景，需要修改成，鼠標移入時打開菜單，鼠標移出時關(guān)閉菜單。鼠標移入時，顯示菜單。自適應(yīng)屏幕寬度當屏幕尺寸小于像素時，菜單會自動折疊，恢復(fù)默認行為，通過點擊來打開菜單。

完整的代碼放在 jsFiddle Bootstrap Mega Menu 。

我們管 Mega Menu 叫做“大菜單”吧，“巨”、“超級”啥的，不足以彰顯我們的草根貴氣。

有道詞典：

Mega Menu: 大數(shù)據(jù)量網(wǎng)頁菜單；超級菜單式；巨型菜單；超級菜單。

基于Bootstrap Dropdown，實現(xiàn)一個大菜單，有三個問題要解決：

復(fù)用 Yamm!3 的關(guān)鍵樣式。

/** Copy from Yamm!3 http://geedmo.github.io/yamm3/ */
.mega .nav,
.mega .collapse,
.mega .dropup,
.mega .dropdown {
  position: static;
}

.mega .container {
  position: relative;
}

.mega .dropdown-menu {
  left: auto;
}

.mega .mega-content {
  padding: 20px 30px;
}

.mega .dropdown.mega-fw .dropdown-menu {
  left: 0;
  right: 0;
}

Bootstrap Dropdown 組件通過點擊打開菜單，不符合大菜單場景，需要修改成，鼠標移入時打開菜單，鼠標移出時關(guān)閉菜單。

鼠標移入時，顯示菜單。

鼠標移出時，隱藏菜單。

鼠標點擊菜單中的鏈接時，隱藏菜單。

$(function() {
  $("body")
    .on("mouseenter", "li.dropdown", function() {
      !$("li.dropdown").hasClass("hover") && $(this).addClass("hover");
    })
    .on("mouseleave", "li.dropdown", function() {
      $("li.dropdown").hasClass("hover") && $(this).removeClass("hover");
    })
    .on("click", "a.menu-link", function() {
      var $this = $(this);
      setTimeout(function() {
        $this.closest("li.dropdown").removeClass("hover");
      }, 100);
    });
});

當屏幕尺寸小于768像素時，菜單會自動折疊，恢復(fù)Bootstrap默認行為，通過點擊來打開菜單。

有個取巧的方法，我們使用一個只在屏幕大于768像素時生效的.hover類，這樣一來，屏幕超過768像素，菜單是通過鼠標進入打開，而屏幕小于768像素時，使用Bootstrap Dropdown的默認行為，即通過點擊來打開和關(guān)閉菜單。

@media (min-width: 768px) {
  /* disable dropping down on mouse click */
  ul.nav li.open > ul.dropdown-menu {
    display: none;
  }
  /* enable dropping down on mouse hover */
  ul.nav li.dropdown.hover > ul.dropdown-menu {
    display: block;
  }
  /* changing caret pointing direction on hover */
  .nav .dropdown.hover .caret {
    border-top: none;
    border-bottom: 4px dashed;
  }
}

完整的代碼放在jsFiddle Bootstrap Mega Menu 。

參考資料：

Immediately-Invoked-Function-Expression vs. Self-Executing Anonymous Function

Closures explained with JavaScript

Mouse Over vs. Mouse Enter