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 相关文章推荐
jQuery 性能优化指南(2)
May 21 Javascript
JavaScript调用Activex控件的事件的实现方法
Apr 11 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
详解angular中的作用域及继承
May 31 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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 session 错误
2009/05/21 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
python解析xml文件操作实例
2014/10/05 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Python装饰器原理与用法分析
2018/04/30 Python
Django的CVB实例详解
2020/02/10 Python
详解Python IO口多路复用
2020/06/17 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
销售简历自我评价
2014/01/24 职场文书
考核工作实施方案
2014/03/30 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
法定代表人资格证明书
2014/09/11 职场文书
2014和解协议书范文
2014/09/15 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
Go gorilla/sessions库安装使用
2022/08/14 Golang