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跨浏览器的属性判断方法
Mar 16 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 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的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
Python Django基础二之URL路由系统
2019/07/18 Python
python 魔法函数实例及解析
2019/09/25 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
教育专业个人求职信
2013/12/02 职场文书
博士生求职信
2014/07/06 职场文书
故宫导游词
2015/01/31 职场文书
2015年党小组工作总结
2015/05/26 职场文书
学校教学管理制度
2015/08/06 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
Redis集群的关闭与重启操作
2021/07/07 Redis
Python必备技巧之字符数据操作详解
2022/03/23 Python
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL