jQuery实现的导航条切换可显示隐藏


Posted in Javascript onOctober 22, 2014

用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ):

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航条在项目中的应用</title>
<script language="javascript" type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".tit").find("span").click(function(){
$(this).toggleClass("closeBtn2").parent().next().slideToggle(); //实现内容隐藏显示,及图标的切换
}) ;
$(".clsBot").click(function(){
$(this).parent().find("li:gt(4)").toggle(); //实现内容索引值大于4的隐藏或者显示

})
})
</script>
<style type="text/css">
*{ margin: 0;padding: 0;}
ul li{ list-style: none;}
.box{ width: 400px; margin: 100px auto; border: 1px solid #ddd;}
.tit{ background: #999; height: 30px; color: #fff; font-size: 14px; line-height: 30px; padding-left: 6px; position: relative;}
.closeBtn{ background: url("Images/a2.gif") no-repeat 0 0; width: 7px; height: 8px; position: absolute; right: 10px; top: 10px; display: block; text-indent: -9999px; cursor: pointer;}
.closeBtn2{background: url("Images/a1.gif") no-repeat 0 0;}
.content{padding: 6px;font-size: 12px; overflow: hidden; }
.content li{ float: left; width: 100px; height: 24px; }
.content li a{ color: #999;}
.content li a:hover{ color: red;}
.clsBot{ display: block; clear: both; background: url("Images/a5.gif") no-repeat right 0; padding-right: 16px; float: right; width: 26px; cursor: pointer; color: blue;}
</style>
</head>
<body>
<div class="box">
<div class="tit">
<h2>图书分类</h2>
<span class="closeBtn">关闭</span>
</div>
<div class="content">
<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>
<span class="clsBot">简化</span>
</div>
</div>
</body>
</html>

效果图:
jQuery实现的导航条切换可显示隐藏

Javascript 相关文章推荐
JavaScript 继承详解(一)
Jul 13 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
js图片处理示例代码
May 12 Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
JavaScript流程控制(循环)
Dec 06 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 #Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 #Javascript
js实现select跳转功能代码
Oct 22 #Javascript
Javascript原型链和原型的一个误区
Oct 22 #Javascript
Javascript this 关键字 详解
Oct 22 #Javascript
Javascript 构造函数详解
Oct 22 #Javascript
Javascript中Array.prototype.map()详解
Oct 22 #Javascript
You might like
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
php实现网站插件机制的方法
2009/11/10 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
javascript正则表达式总结
2016/02/29 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
vue使用vue-cli快速创建工程
2017/07/28 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
推荐下python/ironpython:从入门到精通
2007/10/02 Python
python数据结构之二叉树的建立实例
2014/04/29 Python
Python中实现的RC4算法
2015/02/14 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
Python bisect模块原理及常见实例
2020/06/17 Python
迷你西餐厅创业计划书范文
2013/12/31 职场文书
高中综合实践活动总结
2014/07/07 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
员工开除通知书
2015/04/25 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书