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.8.0.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）初始化

（2）点击“模块”

jQuery事件控制点击内容下拉的更多相关文章

  1. 第二百一十二节，jQuery EasyUI，Combo(自定义下拉框)组件

    jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...

  2. iOS 点击cell下拉

    iOS  点击cell下拉 代码如下: #import "ViewController.h" @interface ViewController ()<UITableView ...

  3. 模块：（日期选择）jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器

    一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...

  4. jQuery插件：模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

  5. 雷林鹏分享：jQuery EasyUI 表单 - 过滤下拉数据网格

    jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...

  6. 雷林鹏分享：jQuery EasyUI 表单 - 格式化下拉框

    jQuery EasyUI 表单 - 格式化下拉框 本教程向您展示如何创建一个简单的下拉框(Combobox),让它在下拉框中显示图片项.您可以在下拉框(combobox)上使用 formatter ...

  7. jQuery实现一个淡入淡出下拉菜单 非常简易

    前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...

  8. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  9. js （单个的）点击式下拉菜单

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. 【移动开发】SparseArray替代HashMap

    SparseArray是android里为<Interger,Object>这样的Hashmap而专门写的class,目的是提高效率,其核心是折半查找函数(binarySearch). p ...

  2. Oracle启用scott用户

    先查询一下目前数据库是否有scott用户 select username,account_status from dba_users where username like '%SCOTT%'; 如果 ...

  3. 【Unity Shader实战】卡通风格的Shader（一）

    写在前面 本系列其他文章: 卡通风格的Shader(二) 呜,其实很早就看到了这类Shader,实现方法很多,效果也有些许不一样.从这篇开始,陆续学习一下接触到的卡通类型Shader的编写. 本篇的最 ...

  4. 最简单的基于FFmpeg的封装格式处理：视音频分离器（demuxer）

    ===================================================== 最简单的基于FFmpeg的封装格式处理系列文章列表: 最简单的基于FFmpeg的封装格式处理 ...

  5. Git工程迁移方法总结（命令行）

    Git工程迁移方法总结 Git工程迁移方法总结 Git最近准备迁移一下位置,这里采用命令行的方式,做如下操作. 1.git init  初始化git仓库,这个时候发现本地文件夹多了个.git的文件夹. ...

  6. RH阴性血妇女怀孕注意事项

     RH阴性血的妇女怀孕注意事项,本文主要讲解RH阴性血抗体效价检测. 第一.孕前准备:Rh阴性的妇女怀孕前,需要到血液中心或指定医院作ABO和Rh血型鉴定,并且做一次孕前血液免疫学产前检查(血型抗体检 ...

  7. UNIX环境高级编程——无名管道和有名管道

    一.进程间通信 每个进程各自有不同的用户地址空间,任何一个进程的全局变量在另一个进程中都看不到,所以进程之间要交换数据必须通过内核,在内核中开辟一块缓冲区,进程1把数据从用户空间拷到内核缓冲区,进程2 ...

  8. ROC曲线的AUC（以及其他评价指标的简介）知识整理

    相关评价指标在这片文章里有很好介绍 信息检索(IR)的评价指标介绍 - 准确率.召回率.F1.mAP.ROC.AUC:http://blog.csdn.net/marising/article/det ...

  9. (NO.00003)iOS游戏简单的机器人投射游戏成形记(十八)

    在游戏中制作手臂瞄准线,也就是所谓的辅助延长线.玩台球游戏的童鞋应该可以了解. 按道理来说,延长线是一个物理实体,遇到物理刚体应该会发生反弹行为,这个符合实际游戏逻辑. 但是这里为了简单,只是做一条& ...

  10. sql中with的用法（CTE公用表表达式）:应用子查询嵌套，提高sql性能

    一．WITH AS的含义 WITH AS短语,也叫子查询部分(subquery factoring),定义一个SQL片断,该片断会被整个SQL语句所用到. 有时是为了让SQL语句的可读性更高些,也可能 ...