javascript 使用 Jquery 的多级下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10647297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multi Level Drop Down Menu Using Jquery
提问by Kamal
I want to design a multilevel menu using jQuery. I have already written some code .You can see the demo here. All this works fine. But I want to make multilevel drop down menus dynamically.
我想使用 jQuery 设计一个多级菜单。我已经写了一些代码。你可以在这里看到演示。所有这些工作正常。但我想动态制作多级下拉菜单。
Script
脚本
$('ul#menu > li').hover(function(){
//$('#drop' , this).css('display','block');
$('.drop' , this).delay(20).slideDown(200);
}, function(){
$('.drop' , this).delay(20).slideUp(200);
});?
HTML
HTML
<ul id="menu">
<li><a href="#">Home</a>
<ul class="drop">
<li><a href="#">About us</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">About us</a></li>
</ul>
</li>
<li><a href="#">about</a>
<ul class="drop">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</li>
</ul>?
CSS
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;
}?
回答by Vishal
You need to change the jQuery script a little to accommodate for the multilevel menus like this:
您需要稍微更改 jQuery 脚本以适应这样的多级菜单：
$('ul#menu li').hover(function(){
$(this).children('ul').delay(20).slideDown(200);
}, function(){
$(this).children('ul').delay(20).slideUp(200);
});
and change html like this:
并像这样更改html：
<ul id="menu">
<li><a href="#">Home</a>
<ul class="drop">
<li><a href="#">About us</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">About us</a></li>
<li>
<a href="#">About us</a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li>
<a href="#">Sub Item 2</a>
<ul>
<li><a href="#">Sub item 3</a></li>
<li><a href="#">Sub item 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">about</a>
<ul class="drop">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</li>
</ul>
Your css is fine. You can check the updated multilevel code at: http://jsfiddle.net/297t6/
你的css没问题。您可以在以下位置检查更新的多级代码：http: //jsfiddle.net/297t6/
回答by Thulasiram
$(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('<ul id="menu"><ul>');
$.each(data, function (i, entity) {
var liHtml = [];
liHtml.push('<li><a href="' + entity.Url + '">' + entity.Name + '</a>');
if (entity.SubMenu.length > 0) {
liHtml.push('<ul class="drop">');
$.each(entity.SubMenu, function (i, subEntity) {
liHtml.push('<li><a href="' + subEntity.Url + '">' + subEntity.Name + '</a>');
});
liHtml.push('</ul>');
}
liHtml.push('</li>');
$('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);
});
});
for live demo see this link: http://jsfiddle.net/nanoquantumtech/Z5NXv/
对于现场演示，请参阅此链接：http: //jsfiddle.net/nanoquantumtech/Z5NXv/
