Jquery代码为多级下拉菜单导航菜单 [英] Jquery code for multi-level dropdown navigation menu
本文介绍了Jquery代码为多级下拉菜单导航菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
全部
我是JQuery的新手,并尝试编写JQuery代码来创建多级下拉菜单。 HTML如下所示:
I am new to JQuery and trying to write JQuery code to create a multi level dropdown menu. The HTML looks like below:
<ul id="menu">
<li><a href="#">Link 1</a>
<ul class="submenu">
<li><a href="#">Sub Link 1.1</a>
<ul class="submenu">
<li><a href="#"> Sub Link 1.1.1</a></li>
<li><a href="#"> Sub Link 1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Link 1.2</a></li>
<li><a href="#">Sub Link 1.3</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul class="submenu">
<li><a href="#">Sub Link 2.1</a>
<ul class="submenu">
<li><a href="#"> Sub Link 2.1.1</a></li>
<li><a href="#"> Sub Link 2.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Link 2.2</a></li>
</ul>
</li>
</ul>
我到目前为止的JQuery代码如下,但不是打开和关闭子菜单。我可以让它工作吗?
The JQuery code I got so far is as under, but it's not opening and closing the submenus.How can I make it work?
$(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(); }
);
});
推荐答案
将此出来: http://jsfiddle.net/g5xSX/ ,也许这正是你想要的
Chick this out: http://jsfiddle.net/g5xSX/ , maybe it is exactly what you want
这篇关于Jquery代码为多级下拉菜单导航菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文