婚车租赁微信小程序_jQuery基于工作控制完成点击

jQuery基于事件控制实现点击显示内容下拉效果       这篇文章主要介绍了jQuery基于事件控制实现点击显示内容下拉效果,涉及jQuery事件响应及元素属性动态操作相关技巧,需要的朋友可以参考下

本文实例讲述了jQuery基于事件控制实现点击显示内容下拉效果。分享给大家供大家参考,具体如下:

1、实例代码:

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 html xmlns="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(){
 $(".("你好,欢迎来到凡科!");
 $(".module").click(function(){
 $(this).addClass("open").next(".content").css("display","block");
 $(this).css("color","#FFFFF");
 /script 
 /head 
 body 
 div 
 div 模块 /div 
 div /div 
 /div 
 /body 
 /html 

2、实例结果:

(1)初始化

(2)点击“模块”

凡科抠图:这里再附上javascript常见事件与功能说明的在线对照表供大家参考:

javascript事件与功能说明大全:

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》、《》及《》

希望本文所述对大家jQuery程序设计有所帮助。