下拉菜單的行爲與原生菜單欄相似

Question

我知道有數百個用於下拉菜單的jQuery插件，但似乎無法找到符合我需求的插件。要求如下：

1. 下拉框上點擊
2. 如果下拉是開開，在下拉菜單其餘打開懸停
3. 下拉框只關閉，直到你點擊。

這與MacOS如何管理其菜單欄非常相似，我認爲Windows也是如此。

Google's Code Editor中的菜單表現非常像此，供參考。

我不能將jQuery UI作爲附加的依賴項。我的應用程序已經很胖了。

Answer 1

好，而不是使用一個大的插件，你總是可以使自己適合您的規格，它是用最少的代碼很簡單：

工作的jsfiddle：http://jsfiddle.net/Mh3Pm/

HTML：

<ul id="main_nav"> 
    <li> 
     <a href="#">Link 1</a> 
     <ul class="sub_nav"> 
      <li><a href="#">Sublink 1</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Link 2</a> 
     <ul class="sub_nav"> 
      <li><a href="#">Sublink 1</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Link 3</a> 
     <ul class="sub_nav"> 
      <li><a href="#">Sublink 1</a></li> 
     </ul> 
    </li> 
</ul> 

CSS：

ul#main_nav > li { 
    width: 70px; 
    float: left; 
} 

ul.sub_nav { 
    display: none; 
} 

#main_nav.active ul.sub_nav.active { 
    display: block; 
} 

JS：

$('ul#main_nav').on('click', function() { 
    $(this).toggleClass('active'); 
}); 

$('body').on('click', function(e) { 
    if ($(e.target).closest('ul#main_nav').length == 0) { 
     $('ul#main_nav').removeClass('active'); 
    } 
}); 

$('ul#main_nav > li > a').on('mouseover', function() { 
    $('ul.sub_nav').removeClass('active'); 
    $(this).siblings('ul.sub_nav').addClass('active'); 
}); 

我相信這不是完美的，但它應該讓你走上正軌。