使用Jquery的多级下拉菜单
我想用jQuery设计一个多级菜单。 我已经写了一些代码。你可以在这里看到演示。 这一切都很好。 但我想动态制作多级下拉菜单。
脚本
$('ul#menu > li').hover(function(){ //$('#drop' , this).css('display','block'); $('.drop' , this).delay(20).slideDown(200); }, function(){ $('.drop' , this).delay(20).slideUp(200); }); HTML
CSS
ul#menu { margin:0; padding:0; } ul#menu > li { list-style:none; float:left; margin:0; padding:0; position:relative; } ul#menu a { text-decoration:none; color:#fff; background:red; display:block; padding:10px; } ul#menu > li ul.drop { margin:0; padding:0; width:150px; position:absolute; display:none; } ul#menu > li ul.drop ul { margin:0; padding:0; width:150px; position:absolute; display:none; left:150px; top:0; } ul#menu > li ul li { margin:0; padding:0; list-style:none; position:relative; }
您需要稍微更改jQuery脚本以适应多级菜单，如下所示：
$('ul#menu li').hover(function(){ $(this).children('ul').delay(20).slideDown(200); }, function(){ $(this).children('ul').delay(20).slideUp(200); });
并改变这样的HTML：
你的CSS很好。 您可以在http://jsfiddle.net/297t6/查看更新的多级代码
$(document).ready(function () { var data = [{ 'Name': 'Home', 'Url': '#', 'SubMenu': [{ 'Name': 'Home1', 'Url': '#' }, { 'Name': 'Home2', 'Url': '#' }, { 'Name': 'Home3', 'Url': '#' }, { 'Name': 'Home4', 'Url': '#' }, ] }, { 'Name': 'AboutUs', 'Url': '#', 'SubMenu': [{ 'Name': 'AboutUs1', 'Url': '#' }, { 'Name': 'AboutUs2', 'Url': '#' }, { 'Name': 'AboutUs3', 'Url': '#' }, { 'Name': 'AboutUs4', 'Url': '#' }, ]}]; if (data.length > 0) { $('body').prepend(''); $.each(data, function (i, entity) { var liHtml = []; liHtml.push('- ' + entity.Name + ''); if (entity.SubMenu.length > 0) { liHtml.push('
'); $.each(entity.SubMenu, function (i, subEntity) { liHtml.push('- ' + subEntity.Name + ''); }); liHtml.push('
'); } liHtml.push(' '); $('ul#menu').append(liHtml.join('')); }); } $('ul#menu > li').hover(function () { //$('#drop' , this).css('display','block'); $('.drop', this).delay(20).slideDown(200); }, function () { $('.drop', this).delay(20).slideUp(200); }); });
现场演示请看这个链接： http ： //jsfiddle.net/nanoquantumtech/Z5NXv/