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. COM原理与实现之一

    COM原理与实现之一 COM组件其实是一种特殊的对象体系,遵循一个统一的标准,使到各个软件都可以通过某种方法访问这个对象的方法,也就可以做到组件调用.COM就是统一的标准--通过接口来调用COM组件. ...

  2. 18 UI美化状态集合的位图selector

    当我们某个控件 想在不同状态下显示不同的背景图的需求 如我们需要按钮在正常状态显示一种图 按下显示另一背景图 或者单选框被选中时是一种显示图片 没选中是另一种背景图 例子 按钮在不同状态显示不同的背景 ...

  3. 1.0、Android Studio管理你的项目

    项目概览 Android Studio中的项目包含了开发一个app的工作环境所需要的一切.从代码,到资源,到测试到构建配置.当你创建一个新的项目的时候,Android Studio为所有的文件创建了必 ...

  4. 05 利用Appliction 传值Activity

    步骤一:新建一个类继承Application必须是public class 不然直接奔溃 步骤二:在清单文件AndroidManifest.xml的application添加name属性 值为com. ...

  5. 听说你又一次放弃了Dagger2，来听老夫说道说道

    关于Dagger2是啥,用法网上已经有很多了.不过听说你已经很多次Dagger2从入门到放弃了,来来,让我这个老中医给你治一治.老夫手法纯熟,不会让你有任何痛苦的,放心读下去吧. 本文同步自 博主的私 ...

  6. UIActionSheet，UIAlertView技术分享

    UIActionSheet #import "FirstViewController.h" @interface FirstViewController ()<UIActio ...

  7. Ubuntu安装JDK与环境变量配置

    Ubuntu安装JDK与环境变量配置 一.getconf LONG_BIT 查看系统位数,并下载相应的jdk.我的系统是32位的,所以下载的jdk是:jdk-8u77-linux-i586.gz.并且 ...

  8. Linux IPC实践(3) --具名FIFO

    FIFO具名/命名管道 (匿名)管道应用的一个限制就是只能在具有共同祖先(具有亲缘关系)的进程间通信. 如果我们想在不相关的进程之间交换数据,可以使用FIFO文件来做这项工作,它经常被称为命名管道;命 ...

  9. Chipmunk僵尸物理对象的出现和解决(六)

    既然出现了这个问题下面就是如何找到原因. 因为该问题不是每次都出现,偶尔反弹棒碰到五角星时才会多出一个僵尸棒,现象比较随机,较难悉知具体原因. 有时多次触碰又没有出现问题,有时短时间内每次触碰都出现问 ...

  10. Java对象引用处理机制

    翻译人员: 铁锚 翻译时间: 2013年11月13日 原文链接: How does Java handle aliasing? 什么是Java的引用别名机制 Java的引用别名机制(原文为Aliasi ...