2023年7月9日发(作者：)

jQuery实现⼆级下拉菜单效果⼤家都知道jQuery是⼀个框架，它对JS进⾏了封装，使其更⽅便使⽤。前⾯两篇博⽂分别是⽤CSS样式和JS实现的，那么这篇就⽤jQuery来实现⼆级下拉式菜单。使⽤JQuery实现需要⽤到的知识有： 1)使⽤$(function(){...})获取到想要作⽤的HTML元素。 2)通过使⽤children()⽅法寻找⼦元素。 3)通过使⽤show()⽅法来显⽰HTML元素。 4)通过使⽤hide()⽅法来隐藏HTML元素。 5)jQuery库引⽤⽅法:先来看看效果图：最后我们来看看代码的情况，和前⾯的区别不⼤：HTML代码：

CSS样式表外部⽂件代码：/*CSS全局设置*/

*{

margin:0;

padding:0;

}

.nav{

background-color:#EEEEEE;

height:40px;

width:450px;

margin:0 auto;

}

ul{

list-style:none;

}

ul li{

float:left; line-height:40px;

text-align:center;

}

a{

text-decoration:none;

color:#000000;

display:block;

width:90px;

height:40px;

}

a:hover{

background-color:#666666;

color:#FFFFFF;

}

ul li ul li{

float:none;

background-color:#EEEEEE;

}

ul li ul{

display:none;

}

/*为了兼容IE7写的CSS样式，但是必须写在a:hover前⾯*/

ul li ul li a:link,ul li ul li a:visited{

background-color:#EEEEEE;

}

ul li ul li a:hover{

background-color:#009933;

}

JS脚本外部script,js⽂件代码：$(function(){

$(".navmenu").mouseover(function(){

$(this).children("ul").show();

})

$(".navmenu").mouseout(function(){

$(this).children("ul").hide();

})

})

希望本⽂所述对⼤家学习jquery程序设计有所帮助。