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

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

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

有道詞典：

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

基于Bootstrap Dropdown，實(shí)現(xiàn)一個(gè)大菜單，有三個(gè)問(wè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ò)點(diǎn)擊打開(kāi)菜單，不符合大菜單場(chǎng)景，需要修改成，鼠標(biāo)移入時(shí)打開(kāi)菜單，鼠標(biāo)移出時(shí)關(guān)閉菜單。

鼠標(biāo)移入時(shí)，顯示菜單。

鼠標(biāo)移出時(shí)，隱藏菜單。

鼠標(biāo)點(diǎn)擊菜單中的鏈接時(shí)，隱藏菜單。

$(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);
    });
});

當(dāng)屏幕尺寸小于768像素時(shí)，菜單會(huì)自動(dòng)折疊，恢復(fù)Bootstrap默認(rèn)行為，通過(guò)點(diǎn)擊來(lái)打開(kāi)菜單。

有個(gè)取巧的方法，我們使用一個(gè)只在屏幕大于768像素時(shí)生效的.hover類(lèi)，這樣一來(lái)，屏幕超過(guò)768像素，菜單是通過(guò)鼠標(biāo)進(jìn)入打開(kāi)，而屏幕小于768像素時(shí)，使用Bootstrap Dropdown的默認(rèn)行為，即通過(guò)點(diǎn)擊來(lái)打開(kāi)和關(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