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 相关文章推荐
JavaScript模板入门介绍
Sep 26 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
微信小程序实现人脸识别
May 25 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
vue实现整屏滚动切换
Jun 29 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
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
浅析Python编写函数装饰器
2016/03/18 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
Django 用户认证组件使用详解
2019/07/23 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
大学生新闻专业个人自我评价
2013/11/12 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
2015年双拥工作总结
2015/04/08 职场文书
整改通知书格式
2015/04/22 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL