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 在firebug调试时用console.log的方法
May 10 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
浅谈Vue数据响应
Nov 05 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 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随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
js实现登录验证码
2016/12/22 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
Python中zfill()方法的使用教程
2015/05/20 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
Python常用库推荐
2016/12/04 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
解决python对齐错误的方法
2020/07/16 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
幼教个人求职信范文
2013/12/02 职场文书
护士岗位职责
2014/02/16 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书