多级下拉导航菜单的Jquery代码

所有，

我是JQuery的新手，并尝试编写JQuery代码来创建一个多级下拉菜单。 HTML如下所示：

 
Link 1 
 
Sub Link 1.1 
 
 Sub Link 1.1.1
 
 Sub Link 1.1.2
 
 
 
Sub Link 1.2
 
Sub Link 1.3
 
 
 
Link 2 
 
Sub Link 2.1 
 
 Sub Link 2.1.1
 
 Sub Link 2.1.2
 
 
 
Sub Link 2.2
 
 
  

到目前为止我得到的JQuery代码如下，但它不是打开和关闭子菜单。我怎样才能使它工作？

 $(document).ready(function () { $('#ul.menu > li').hover(function () { $('ul:first', this).show(); }, function () { $('ul:first', this).hide(); } ); $('#ul.menu li li').hover(function () { $('ul:first', this).each(function () { var p = $(this).parent(); $(this).css('top', p.position().top) .css('left', p.position().left + p.width()) .show(); });}, function () { $('ul:first', this).hide(); } ); }); 

Answer 1

小便这个： http ： //jsfiddle.net/g5xSX/ ，也许它正是你想要的

Answer 2

我创造了这个小提琴，它只是一个开始，但它的一些工作http://jsfiddle.net/mZzqu/2/

我简化了你的标记（将点击处理程序附加到’li’，它更好）

 
 
Link 1 
 
Sub Link 1.1 
 
 Sub Link 1.1.1
 
Sub Link 1.1.2
 
 
 
Sub Link 1.2
 
Sub Link 1.3
 
 
 
Link 2 
 
Sub Link 2.1 
 
 Sub Link 2.1.1
 
 Sub Link 2.1.2
 
 
 
Sub Link 2.2
 
 
  

jquery代码

 $.fn.dropdown = function (options) { var settings = jQuery.extend({ timeout: 0.2 }, options); var closetimer = null; var ddmenuitem = null; $(this).children('li').each(function(){ $(this).find('ul').hide(); }); $(this).find('li').hover(dropdown_open, dropdown_close); document.onclick = dropdown_close; function dropdown_open(event) { dropdown_canceltimer(); //dropdown_close(); ddmenuitem = $(event.target).children('ul').css('display', 'block'); } function dropdown_close(event) { $(event.target).parent('ul:not(#menu)').hide(); } function dropdown_timer() { closetimer = window.setTimeout(dropdown_close, settings.timeout * 1000); } function dropdown_canceltimer() { if (closetimer) { window.clearTimeout(closetimer); closetimer = null; } } return this; }