当前位置: 编程技术>jquery
jquery 二级导航菜单 示例
来源: 互联网 发布时间:2014-10-04
本文导语: 例子,jquery实现二级导航菜单的代码。 代码示例: $(document).ready(function () { $('#Top .Toolbar1 .CentreBox .Menu .List1 li').mouseenter(function () { var index = $(this).parent().children().index(this); $(this).parent().children().eac...
例子,jquery实现二级导航菜单的代码。
代码示例:
$(document).ready(function () {
$('#Top .Toolbar1 .CentreBox .Menu .List1 li').mouseenter(function () {
var index = $(this).parent().children().index(this);
$(this).parent().children().each(function () {
if ($(this).hasClass('Select')) {
$(this).removeClass('Select');
}
});
$(this).addClass('Select');
$('#Top .Toolbar2 .CentreBox .Menu').each(function () {
if (!$(this).hasClass('Hide')) {
$(this).addClass('Hide');
}
});
$('#Top .Toolbar2 .CentreBox .Menu').eq(index).removeClass('Hide');
});
$('#Top .Toolbar2 .CentreBox .Menu ul li a').mouseenter(function () {
var index = $('#Top .Toolbar2 .CentreBox .Menu ul li a').index(this);
$('#Top .Toolbar2 .CentreBox .Menu ul li').each(function () {
if ($(this).hasClass('Select')) {
$(this).removeClass('Select');
}
});
$(this).parent().addClass('Select');
});
});
$('#Top .Toolbar1 .CentreBox .Menu .List1 li').mouseenter(function () {
var index = $(this).parent().children().index(this);
$(this).parent().children().each(function () {
if ($(this).hasClass('Select')) {
$(this).removeClass('Select');
}
});
$(this).addClass('Select');
$('#Top .Toolbar2 .CentreBox .Menu').each(function () {
if (!$(this).hasClass('Hide')) {
$(this).addClass('Hide');
}
});
$('#Top .Toolbar2 .CentreBox .Menu').eq(index).removeClass('Hide');
});
$('#Top .Toolbar2 .CentreBox .Menu ul li a').mouseenter(function () {
var index = $('#Top .Toolbar2 .CentreBox .Menu ul li a').index(this);
$('#Top .Toolbar2 .CentreBox .Menu ul li').each(function () {
if ($(this).hasClass('Select')) {
$(this).removeClass('Select');
}
});
$(this).parent().addClass('Select');
});
});