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 相关文章推荐
input的focus方法使用
Mar 13 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
ReactNative中使用Redux架构总结
Dec 15 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 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在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
Pycharm调试程序技巧小结
2020/08/08 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
出国留学介绍信
2014/01/13 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技