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编程起步(第六课)
Jan 10 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 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
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
Javascript中replace()小结
2015/09/30 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python编写生成验证码的脚本的教程
2015/05/04 Python
Python 实现链表实例代码
2017/04/07 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
python爬取网页转换为PDF文件
2018/06/07 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
技术总监的工作职责
2013/11/13 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
运动会入场词100字
2014/02/06 职场文书
爱祖国演讲稿
2014/05/04 职场文书
羊脂球读书笔记
2015/06/30 职场文书
六年级作文之预言作文
2019/10/25 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android