学习javascript中有提到构建自己的javascript库，比如jQuery，这些库中包含自己常用的方便的小函数，这些函数可以让自己的代码更加清晰易懂，而且当别人调用时也很容易理解，当然编写库时需要注意一些问题，比如大小写、括号引号、换行等，这些为jQuery学习提供了一些基础，jQuery的学习主要通过几个实例来了解jQuery的应用，通过查看API运用特定方法实现自己的效果，它让网页动了起来。通过代码如何实现一个横向和纵向下拉菜单的效果。
首先在HTML中通过ul和li表示页面中的菜单项，然后添加对css和js文件的引用，注意js引用时要先引用jQuery.js然后再是自己编写的js文件。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>实战三：菜单效果</title>
<link type="text/css" rel="stylesheet" href="css/menu.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<ul>
<li class="main">
<a href="#"> 菜单1</a>
<ul>
<li><a href="#">子菜单11</a></li>
<li><a href="#">子菜单12</a></li>
</ul>
</li>
<li class="main">
<a href="#"> 菜单2</a>
<ul>
<li><a href="#">子菜单21</a></li>
<li><a href="#">子菜单22</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单3</a>
<ul>
<li><a href="#">子菜单31</a></li>
<li><a href="#">子菜单32</a></li>
</ul>
</li>
</ul>
<br />
<br />
<br />
<ul>
<li class="hmain">
<a href="#"> 菜单1</a>
<ul>
<li><a href="#">子菜单11</a></li>
<li><a href="#">子菜单12</a></li>
</ul>
</li>
<li class="hmain">
<a href="#"> 菜单2</a>
<ul>
<li><a href="#">子菜单21</a></li>
<li><a href="#">子菜单22</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单3</a>
<ul>
<li><a href="#">子菜单31</a></li>
<li><a href="#">子菜单32</a></li>
</ul>
</li>
</ul>
</body>
</html>
CSS部分：
ul,li{
/*清除菜单项小圆点*/
list-style: none;
}
ul{
/*清除子菜单的缩进值*/
padding:0;
margin:0;
}
.main,.hmain{
background-image:url(../images/title.gif);
background-repeat:repeat-x;
width:120px;
}
li{
background-color:#CCCCCC;
}
a{
/*取消所有的下划线*/
text-decoration:none;
padding-left:20px;
display:bloock;
display:inline-block;
width:100px;
padding-top:3px;
padding-bottom:3px;
}
.main a,.hmain a{
color:#FFFFFF;
background-image:url(../images/collapsed.gif);
background-repeat:no-repeat;
background-position:3px center;
}
.main li a,.hmain li a{
color:#000000;
background-image:none;
}
.main ul,.hmain ul{
display:none;
}
.hmain{
float:left;
margin-right:1px;
}
menu.js部分：
//纵向菜单点击实现下拉
$(document).ready(function(){
$(".main>a").click(function(){
//找到主菜单对应的子菜单项
var ulNode=$(this).next("ul");
/*if(ulNode.css("display")==""){
ulNode.css("display","block");
changeIcon($(this));
}else{
ulNode.css("display","none");
changeIcon($(this));
}*/
ulNode.slideToggle();//slideToggle方法和toggle类似（直接让显示的元素隐藏，隐藏元素显示）
changeIcon($(this));
});
//横向菜单鼠标经过实现下拉（向下或向上卷动效果）
$(".hmain").hover(function(){
$(this).children("ul").slideDown();
changeIcon($(this).children("a"));
<span style="font-family: SimSun;">},function(){</span>
$(this).children("ul").slideUp();
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')");
}
}
}
效果图：
这个阶段的学习也是要多动手，学会查看文档，掌握了方法，一些效果的实现都大同小异，要不然自己的学习很是单薄，多一份钻研，做一份积累。
时间： 2024-11-01 22:03:45