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:Div层拖动效果实例代码
Aug 06 Javascript
深入理解javascript变量声明
Nov 20 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
学习Angularjs分页指令
Jul 01 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 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/12/18 PHP
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
Python插件机制实现详解
2020/05/04 Python
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
毕业生的自我鉴定
2013/10/29 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
趣味运动会简讯
2015/07/20 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
基于python实现银行管理系统
2021/04/20 Python
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
Vue如何清空对象
2022/03/03 Vue.js