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 子窗口操作父窗口的代码
Sep 21 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
VUE长按事件需求详解
Oct 18 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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 和 XML: 使用expat函数(一)
2006/10/09 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
简单的js分页脚本
2009/05/21 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
图解Python变量与赋值
2018/04/03 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
极简的HTML5模版
2015/07/09 HTML / CSS
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
营销总经理的岗位职责
2013/12/15 职场文书
小学数学国培感言
2014/03/10 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
销售顾问工作计划书
2014/09/15 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
淘宝好评语句大全
2014/12/31 职场文书
个人年终总结结尾
2015/03/06 职场文书
销售会议开幕词
2016/03/04 职场文书
Python实现列表拼接和去重的三种方式
2021/07/02 Python
vue项目支付功能代码详解
2022/02/18 Vue.js