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 最简单的属性菜单
Oct 08 Javascript
js控制input输入字符解析
Dec 27 Javascript
js opener的使用详解
Jan 11 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
php目录拷贝实现方法
2015/07/10 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
详解javascript void(0)
2020/07/13 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
python for循环remove同一个list过程解析
2019/08/14 Python
Python简单实现区域生长方式
2020/01/16 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
水果超市创业计划书
2014/01/27 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
大学学风建设方案
2014/05/04 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
赞美教师的句子
2019/09/02 职场文书
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL