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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
JQuery for与each性能比较分析
May 14 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
js获取图片宽高的方法
Nov 25 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
vue开发拖拽进度条滑动组件
Sep 21 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触发器自动更新memcache的实现代码
2009/10/11 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
jQuery 使用手册(三)
2009/09/23 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python写入CSV文件的方法
2015/07/08 Python
python如何将图片转换为字符图片
2020/08/19 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
python实现石头剪刀布程序
2021/01/20 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
python二元表达式用法
2019/12/04 Python
python实现简单颜色识别程序
2020/02/19 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
如何学习Python time模块
2020/06/03 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
协议书样本
2014/04/23 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
教师工作决心书
2015/02/04 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript