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 类定义的4种方法
Sep 12 Javascript
jquery 可排列的表实现代码
Nov 13 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
Vue绑定用户接口实现代码示例
Nov 04 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
第三节 定义一个类 [3]
2006/10/09 PHP
谈谈PHP语法(3)
2006/10/09 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
this在vue和小程序中的使用详解
2019/01/28 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
Python写的Socks5协议代理服务器
2014/08/06 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
python中int与str互转方法
2018/07/02 Python
Python文件读写常见用法总结
2019/02/22 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
python和php哪个容易学
2020/06/19 Python
Python 实现微信自动回复的方法
2020/09/11 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
论文诚信承诺书
2014/05/23 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
校长师德表现自我评价
2015/03/05 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
2015年领班工作总结
2015/04/29 职场文书
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL