JQUERY学习第二天之制作横纵向导航菜单
$(document).ready(function(){
//页面中的DOM已经装载完成时,执行的代码
$(".main > a").click(function(){
//找到主菜单项对应的子菜单项
var ulNode = $(this).next("ul");
/*
if (ulNode.css("display") == "none") {
ulNode.css("display","block");
} else {
ulNode.css("display","none");
}
*/
//ulNode.show("slow");//normal fast
//ulNode.hide();
//ulNode.toggle();
//
//ulNode.slideDown("slow");
//ulNode.slideUp;
ulNode.slideToggle();
changeIcon($(this));
});
$(".hmain").hover(function(){
$(this).children("ul").slideDown();
changeIcon($(this).children("a"));
},function(){
$(this).children("ul").slideUp();
changeIcon($(this).children("a"));
});
});
/**
* 修改主菜单的指示图标
*/
function changeIcon(mainNode) {
if (mainNode) {
if (mainNode.css("background-p_w_picpath").indexOf("collapsed.gif") >= 0) {
mainNode.css("background-p_w_picpath","url('p_w_picpaths/expanded.gif')");
} else {
mainNode.css("background-p_w_picpath","url('p_w_picpaths/collapsed.gif')");
}
}
}
//页面中的DOM已经装载完成时,执行的代码
$(".main > a").click(function(){
//找到主菜单项对应的子菜单项
var ulNode = $(this).next("ul");
/*
if (ulNode.css("display") == "none") {
ulNode.css("display","block");
} else {
ulNode.css("display","none");
}
*/
//ulNode.show("slow");//normal fast
//ulNode.hide();
//ulNode.toggle();
//
//ulNode.slideDown("slow");
//ulNode.slideUp;
ulNode.slideToggle();
changeIcon($(this));
});
$(".hmain").hover(function(){
$(this).children("ul").slideDown();
changeIcon($(this).children("a"));
},function(){
$(this).children("ul").slideUp();
changeIcon($(this).children("a"));
});
});
/**
* 修改主菜单的指示图标
*/
function changeIcon(mainNode) {
if (mainNode) {
if (mainNode.css("background-p_w_picpath").indexOf("collapsed.gif") >= 0) {
mainNode.css("background-p_w_picpath","url('p_w_picpaths/expanded.gif')");
} else {
mainNode.css("background-p_w_picpath","url('p_w_picpaths/collapsed.gif')");
}
}
}
其他HTML代码见附件
附件:http://down.51cto.com/data/2361406
分享名称:JQUERY学习第二天之制作横纵向导航菜单
本文来源:http://ybzwz.com/article/joosii.html