jQuery仅用3行代码实现的显示与隐藏功能完整实例


Posted in Javascript onOctober 08, 2015

本文实例讲述了jQuery仅用3行代码实现的显示与隐藏功能。分享给大家供大家参考。具体如下:

jQuery技术相当好使用,的确可以用很少的代码实现想要的功能,比如这款经常用到的“显示”与“隐藏”的功能,只需要3行代码就实现了,确实够给力。

运行效果截图如下:

jQuery仅用3行代码实现的显示与隐藏功能完整实例

在线演示地址如下:

具体代码如下:

<!doctype html>
<html>
<head>
<meta charset="gbk" />
<title>3行代码实现显示与隐藏</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style>
  .showmore{ float:left;}
  .cont .aa {
  height: auto;
  width: 400px;
  border: 1px solid #000000;
  margin-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  float: left;
  }
  .cont .aa .a1 {
  float: left;
  height: 30px;
  width: 300px;
  }
  .cont .aa .a2 {
  height: 30px;
  width: 350px;
  float: left;
  display:none;
  }
 </style>
</head>
<body>
<div class="cont">
 <div class="aa">
  <div class="a1">tab1</div>
  <div class="showmore"><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明:今天你要嫁给我嘛~</div>
 </div>
 <div class="aa">
  <div class="a1">tab2</div>
  <div class="showmore" ><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明:北京、上海四日游</div>
 </div>
 <div class="aa">
  <div class="a1">tab3</div>
  <div class="showmore" ><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明:河南是华夏文明的根源</div>
 </div>
</div>
<script>
$(".showmore a span").mouseover(function(e){
 $(this).html(["显示", "隐藏"][this.hutia^=1]);
 $(this.parentNode.parentNode).next().toggle();
 e.preventDefault();
});
</script>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
js小数运算出现多位小数如何解决
Oct 08 #Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 #Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 #Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 #Javascript
Javascript控制div属性动态变化实例分析
Oct 08 #Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 #Javascript
分享五个有用的jquery小技巧
Oct 08 #Javascript
You might like
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
python实现桌面壁纸切换功能
2019/01/21 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
python如何导入依赖包
2020/07/13 Python
Python如何实现线程间通信
2020/07/30 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
经典C++面试题一
2016/11/06 面试题
资源工程专业毕业生求职信
2014/02/27 职场文书
销售内勤岗位职责
2014/04/15 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
健康教育主题班会
2015/08/14 职场文书
员工升职自我评价
2019/03/26 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
详解OpenCV曝光融合
2022/04/29 Python
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS