所有
我是JQuery的新手,并尝试编写JQuery代码来创建一个多级下拉菜单。 HTML如下所示:
<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代码如下,但它不是打开和关闭子菜单。我怎样才能使它工作?
$(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(); }
);
});
答案 0 :(得分:2)
小便出来:http://jsfiddle.net/g5xSX/,也许这正是你想要的
答案 1 :(得分:0)
我创造了这个小提琴,它只是一个开始,但有些它正在运作http://jsfiddle.net/mZzqu/2/
我简化了你的标记(将点击处理程序附加到'li',它更好)
<ul id="menu">
<li>Link 1
<ul class="submenu">
<li>Sub Link 1.1
<ul class="submenu">
<li id='1'> Sub Link 1.1.1</li>
<li>Sub Link 1.1.2</li>
</ul>
</li>
<li>Sub Link 1.2</li>
<li>Sub Link 1.3</li>
</ul>
</li>
<li>Link 2
<ul class="submenu">
<li>Sub Link 2.1
<ul class="submenu">
<li> Sub Link 2.1.1</li>
<li> Sub Link 2.1.2</li>
</ul>
</li>
<li>Sub Link 2.2</li>
</ul>
</li>
</ul>
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;
}