ulNode.slideToggle();
changeIcon($(this));
});
$(“.hmain”).hover(function(){
$(this).children (“ul”).slideToggle();
changeIcon($(this).children(“a”));
},function(){
$(this).children(“ul”).slideToggle();
changeIcon($(this).children(“a”));
});
});
/*
*修改主菜单的指示图标
*/
function changeIcon(mainNode){
if(mainNode){
if(mainNode.css(“background-image”).indexOf(“collapsed.gif”)>=0){
mainNode.css(“background-image”,”url(‘images/expanded.gif’)”);
}else{
mainNode.css(“background-image”,”url(‘images/collapsed.gif’)”);
}
}
}
这样绚丽的下拉菜单就完成了。实现很简单，不过里面的小知识点很零碎。例如：.main a和.main>a的不同之处，前者选择使用.main的这个class的元素内容所有的a节点，后者只选择.main的子节点中的a节点。
这样的例子应用性很强，在网站中使用让界面显得更加的美观，例子才看3个，抓紧时间继续看…
