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 相关文章推荐
JS Timing
Apr 21 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 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
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
php学习 函数 课件
2008/06/15 PHP
Web程序工作原理详解
2014/12/25 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
PHP 实现缩略图
2021/03/09 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
Python连接Redis的基本配置方法
2018/09/13 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
python多进程间通信代码实例
2019/09/30 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
销售行业个人求职自荐信
2013/09/25 职场文书
查摆问题整改措施
2014/10/24 职场文书
2015新年寄语大全
2014/12/08 职场文书
会议主持词开场白
2015/05/28 职场文书