下拉菜单，其行为类似于本机菜单栏

我知道有数百个用于下拉菜单的jQuery插件，但我似乎无法找到符合我需求的插件。 要求如下：

1. 点击下拉打开
2. 如果下拉列表打开，则其余的下拉列表会在hover时打开
3. 下拉菜单仅在您单击之前关闭。

这与MacOS管理其菜单栏的方式非常相似，我认为Windows也是如此。

Google代码编辑器中的菜单与此非常相似，仅供参考。

我不能将jQuery UI作为附加依赖项。 我的申请已经很胖了。

Answer 1

好吧，不是使用大插件，你总是可以自己制作适合自己的规格，只需要很少的代码就可以了：

工作jsFiddle： http ： //jsfiddle.net/Mh3Pm/

HTML：

 
 Link 1 
 
Sublink 1
 
 
 
 Link 2 
 
Sublink 1
 
 
 
 Link 3 
 
Sublink 1
 
 
  

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'); }); 

我敢肯定它并不完美，但它应该让你走上正轨。