jQuery基于事件控制实现点击显示内容下拉效果


Posted in Javascript onMarch 07, 2017

本文实例讲述了jQuery基于事件控制实现点击显示内容下拉效果。分享给大家供大家参考,具体如下:

1、实例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery事件</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
  body{
    font-family:微软雅黑;
    font-size:12px;
    font-stretch:normal;
    background-color:!important;
    width:400px;
    height:auto;
  }
  .total{
    border:#00FF00 solid 1px;
    font-size:12px;
  }
  .module{
    padding:6px;
    font-size:14px;
    font-weight:bolder;
    background-color:#FC6;
  }
  .content{
    padding:8px;
    font-size:12px;
    font-family:微软雅黑;
    text-align:center;
    display:none;
  }
  .open{
    background-color:#0000FF;
  }
</style>
<script type="text/javascript">
   $(function(){
      $(".content").html("你好,欢迎来到三水点靠木!");
      $(".module").click(function(){
        $(this).addClass("open").next(".content").css("display","block");
        $(this).css("color","#FFFFF");
      });
   });
</script>
</head>
<body>
  <div class="total">
    <div class="module">模块</div>
    <div class="content"></div>
  </div>
</body>
</html>

2、实例结果:

(1)初始化

jQuery基于事件控制实现点击显示内容下拉效果

(2)点击“模块”

jQuery基于事件控制实现点击显示内容下拉效果

PS:这里再附上javascript常见事件与功能说明的在线对照表供大家参考:

javascript事件与功能说明大全:
http://tools.3water.com/table/javascript_event

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
简单分析javascript中的函数
Sep 10 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 #Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 #Javascript
AngularJS监听路由变化的方法
Mar 07 #Javascript
微信小程序开发之入门实例教程篇
Mar 07 #Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 #Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 #Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 #Javascript
You might like
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
实用函数10
2007/11/08 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
php输出xml属性的方法
2015/03/19 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
python中日期和时间格式化输出的方法小结
2015/03/19 Python
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
化工工艺专业求职信
2013/09/22 职场文书
读书活动实施方案
2014/03/10 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
离婚协议书格式
2015/01/26 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技