jquery入门—编写一个导航条(可伸缩)

更新时间：2013年01月07日 11:08:03 作者：

编写一个导航条，单击标题时，可以伸缩导航条内容，简化内容或显示更多内容等等效果相当不错，感兴趣的朋友可以了解下哦

1、编写一个导航条，单击标题时，可以伸缩导航条内容，简化内容或显示更多内容。
示例代码如下：

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"> 
</script> 
<style type="text/css"> 
body{font-size:13px} 
#divFrame{border:solid 1px #666;width:301px;overflow:hidden} 
#divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:hand} 
#divFrame .clsHead h3{padding:0px;margin:0px;float:left} 
#divFrame .clsHead span{float:right;margin-top:3px} 
#divFrame .clsContent{padding:8px} 
#divFrame .clsContent ul{list-style-type:none;margin:0px;padding:0px} 
#divFrame .clsContent ul li{float:left;width:95px;height:23px;line-height:23px} 
#divFrame .clsBot{float:right;padding-top:5px;padding-bottom:5px} 
.GetFocus{background-color:#eee} 
</style> 
<script type="text/javascript"> 
$(function(){ //页面加载事件 
$(".clsHead").click(function(){ //图片点击事件 
if($(".clsContent").is(":visible")){ //如果内容可见 
$(".clsHead span img").attr("src","Images/a1.gif"); //改变图片 
$(".clsContent").css("display","none"); //隐藏内容 
}else{ 
$(".clsHead span img").attr("src","Images/a2.gif"); //改变图片 
$(".clsContent").css("display","block");//显示内容 
} 
}); 
$(".clsBot > a").click(function(){ //热点链接点击事件 
if($(".clsBot > a").text()=="简化"){ //如果内容为'简化'字样 
$("ul li:gt(4):not(:last)").hide(); //隐藏index号大于4且不是最后一项的元素 
$(".clsBot > a").text("更多"); //将字符内容更改为"更多" 
}else{ 
$("ul li:gt(4):not(:last)").show().addClass("GetFocus"); //显示所选元素且增加样式 
$(".clsBot > a").text("简化"); //将字符内容更改为"简化" 
} 
}); 
}); 
</script> 
</HEAD> 
<BODY> 
<div id="divFrame"> 
<div class="clsHead"> 
<h3>图书分类</h3> 
<span><img src="Images/a2.gif" alt="book!"/></span> 
</div> 
<div class="clsContent"> 
<ul> 
<li><a href="#">小说</a><i> ( 1110 ) </i></li> 
<li><a href="#">文艺</a><i> ( 230 ) </i></li> 
<li><a href="#">青春</a><i> ( 1430 ) </i></li> 
<li><a href="#">少儿</a><i> ( 1560 ) </i></li> 
<li><a href="#">生活</a><i> ( 870 ) </i></li> 
<li><a href="#">社科</a><i> ( 1460 ) </i></li> 
<li><a href="#">管理</a><i> ( 1450 ) </i></li> 
<li><a href="#">计算机</a><i> ( 1780 ) </i></li> 
<li><a href="#">教育</a><i> ( 930 ) </i></li> 
<li><a href="#">工具书</a><i> ( 3450 ) </i></li> 
<li><a href="#">引进版</a><i> ( 980 ) </i></li> 
<li><a href="#">其它类</a><i> ( 3230 ) </i></li> 
</ul> 
</div> 
<div class="clsBot"> 
<a href="#">简化</a> 
<img src="Images/a5.gif" alt=""/> 
</div> 
</div> 
</BODY> 
</HTML> 

2、效果图：

点击后：

简化后：

您可能感兴趣的文章:

jquery.validate表单验证插件使用详解
这篇文章主要为大家详细介绍了jquery.validate表单验证插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
最新28个很棒的jQuery 教程
jQuery 是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择。今天的这篇文章收集了最新28个非常有用的 jQuery 教程分享给大家。
2011-05-05
jQuery中prevUntil()方法用法实例
这篇文章主要介绍了jQuery中prevUntil()方法用法,实例分析了按条件查找匹配元素之前所有的同辈元素的使用技巧,需要的朋友可以参考下
2015-01-01
jquery中的ajax方法怎样通过JSONP进行远程调用
这篇文章主要介绍了jquery中的ajax方法怎样通过JSONP进行远程调用,需要的朋友可以参考下
2014-05-05
遮罩层点击按钮弹出并且具有拖动和关闭效果（两种方法）
实现点击按钮弹出遮罩层，点击按钮可以随意拖动和关闭。接下来，通过本篇文章给大家介绍遮罩层点击按钮弹出并且具有拖动和关闭效果，需要的朋友可以参考下
2015-08-08
jquery创建一个ajax关键词数据搜索实现思路
我们经常需要在前台页面输入关键词进行数据的搜索这已经成为了一种习惯今天给大家分享一下如何使用 jQuery，MySQL和Ajax创建简单和有吸引力的Ajax搜索,感兴趣的你可不要错过了哈
2013-02-02
JQuery Mobile 弹出式登录框的实现方法
下面小编就为大家带来一篇JQuery Mobile 弹出式登录框的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
jquery操作HTML5 的data-*的用法实例分享
从jQuery 1.4.3起， HTML 5 data- 属性将自动被引用到jQuery的数据对象中。也就是说虽然 data-* 是在html5 中的元素, 但是如果使用 jquery 1.4.3库以上的.还是可以在非HTML5的页面或浏览器里, 仍然可以使用.data(obj)方法来操作"data-*" 数据.
2014-08-08
jquery插入兄弟节点的操作方法
下面小编就为大家带来一篇jquery插入兄弟节点的操作方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-12-12
基于jQuery实现的图片切换焦点图整理
这篇文章主要介绍了基于jQuery实现的图片切换焦点图整理,需要的朋友可以参考下
2014-12-12