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 开发规范要求(图文并茂)
Jun 11 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
webpack3之loader全解析
Oct 26 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
Vite + React从零开始搭建一个开源组件库
Jun 25 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学习之流程控制实现代码
2011/06/09 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
js获取图片大小的函数代码
2011/09/20 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
详解flask入门模板引擎
2018/07/18 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Python笔试面试题小结
2019/09/07 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
Django websocket原理及功能实现代码
2020/11/14 Python
python 模拟登陆github的示例
2020/12/04 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
文科教师毕业的自我评价
2014/01/16 职场文书
食品安全承诺书范文
2014/08/29 职场文书
教师节横幅标语
2014/10/08 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
旅游项目合作意向书
2015/05/08 职场文书
我的长征观后感
2015/06/09 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
Python Flask实现进度条
2022/05/11 Python