脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery事件控制点击显示内容

jQuery基于事件控制实现点击显示内容下拉效果

 更新时间：2017年03月07日 11:35:40   作者：翱翔天地  
这篇文章主要介绍了jQuery基于事件控制实现点击显示内容下拉效果,涉及jQuery事件响应及元素属性动态操作相关技巧,需要的朋友可以参考下

本文实例讲述了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）初始化

（2）点击“模块”

PS：这里再附上javascript常见事件与功能说明的在线对照表供大家参考：

javascript事件与功能说明大全：
http://tools.jb51.net/table/javascript_event

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

相关文章

  • Jquery操作DOM元素方法详解

    Jquery操作DOM元素方法详解

    本文详细讲解了Jquery操作DOM元素的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-05-05
  • jQuery表单插件ajaxForm实例详解

    jQuery表单插件ajaxForm实例详解

    前端时间写项目用到了ajaxForm这个插件，可以用它提交表单和上传图片，听起来和正常的form表单提交没什么区别，只不过是ajax提交，无需刷新页面,下面通过实例给大家介绍jQuery表单插件ajaxForm，需要的朋友参考下吧
    2017-01-01
  • Jquery 监视按键，按下回车键触发某方法的实现代码

    Jquery 监视按键，按下回车键触发某方法的实现代码

    这篇文章主要介绍了jquery监视按键，当按下回车键时触发事件的一个例子，有需要的朋友可以参考下
    2014-05-05
  • jQuery中:only-child选择器用法实例

    jQuery中:only-child选择器用法实例

    这篇文章主要介绍了jQuery中:only-child选择器用法,实例分析了:only-child选择器的功能、定义及匹配父元素的唯一子元素使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • EasySlider 基于jQuery功能强大简单易用的滑动门插件

    EasySlider 基于jQuery功能强大简单易用的滑动门插件

    Easy Slider 是一个滑动门插件，支持任何图片或内容，当点击时实现横向或纵向滑动。它拥有一系列丰富的参数设置，可通过CSS来进行完全的控制。
    2010-06-06
  • ajax无刷新动态调用股票信息(改良版)

    ajax无刷新动态调用股票信息(改良版)

    今日闲来无事，把上次写的代码稍微改了改。增加了动态追加和删除股票信息的功能（代码基于jquery运行：http://jquery.com/） 。由于对Ajax技术的认识还只是在初级阶段，总觉得这么些有点别扭，希望大虾能够指点一二。
    2008-11-11
  • 当鼠标移动时出现特效的JQuery代码

    当鼠标移动时出现特效的JQuery代码

    当鼠标移动时出现特效，在某些情况下还是比较实现的，下面为大家介绍下通过JQuery是如何实现的，具体如下，感兴趣的朋友可以参考下
    2013-11-11
  • jQuery实现高亮显示的方法

    jQuery实现高亮显示的方法

    这篇文章主要介绍了jQuery实现高亮显示的方法,涉及jQuery样式控制的addClass与removeClass方法使用技巧,需要的朋友可以参考下
    2015-03-03
  • jquery精度计算代码 jquery指定精确小数位

    jquery精度计算代码 jquery指定精确小数位

    这篇文章主要为大家详细介绍了jquery精度计算代码,jquery指定精确小数位，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 用Jquery.load载入页面实现局部刷新

    用Jquery.load载入页面实现局部刷新

    用jquery.load的方法载入新的页面，以实现局部刷新，可结果发现载入进来的页面与原来单独的页面不一样，样式没了，关于这个问题，下面有个不错的解决方法
    2014-01-01

最新评论