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 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
对python中的装包与解包实例详解
2019/08/24 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
Python中Selenium库使用教程详解
2020/07/23 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
个人教师自我评价范文
2013/12/02 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
汽车促销活动方案
2014/03/31 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
Python基础详解之描述符
2021/04/28 Python
Python的三个重要函数详解
2022/01/18 Python