脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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技术实现Tab页界面之二

    用jQuery技术实现Tab页界面之二

    这个tab页是把数据全部取回来再显示，所以没有数据缓存的特点。但是因为数据全部是显示的html代码，所以对搜索引擎是友好的，也许对seo有好处。
    2009-09-09
  • jquery实现的点击翻书效果代码

    jquery实现的点击翻书效果代码

    这篇文章主要介绍了jquery实现的点击翻书效果代码,可呈现点击图片显示翻页的效果,涉及jQuery响应鼠标事件动态改变页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • jquery html动态生成select标签出问题的解决方法

    jquery html动态生成select标签出问题的解决方法

    用jquery,json从后台获取一个列表，然后用一个动态生成的select标签显示出来，结果出现错误，下面为大家分享个不错的解决方法，喜欢的朋友可以参考下
    2013-11-11
  • JQuery中Text方法用法实例分析

    JQuery中Text方法用法实例分析

    这篇文章主要介绍了JQuery中Text方法用法,实例分析了Text方法设置文本内容的使用方法,非常简单实用,需要的朋友可以参考下
    2015-05-05
  • jQuery实现数字加减效果汇总

    jQuery实现数字加减效果汇总

    本文将介绍常见的几种使用spinner数字微调器来实现数字加减的功能的方法。非常的简单实用，这里推荐给大家
    2014-12-12
  • jQuery实现B2B网站后台管理系统侧导航

    jQuery实现B2B网站后台管理系统侧导航

    这篇文章主要介绍了jQuery实现B2B网站后台管理系统侧导航，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-07-07
  • 完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题

    完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题

    下面小编就为大家带来一篇完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • JQuery为页面Dom元素绑定事件及解除绑定方法

    JQuery为页面Dom元素绑定事件及解除绑定方法

    这篇文章主要介绍了JQuery为页面Dom元素绑定事件及解除绑定方法,需要的朋友可以参考下
    2014-04-04
  • jquery 元素相对定位代码

    jquery 元素相对定位代码

    align:左右对齐;vlign:垂直对齐;xleft:水平补给值;xleft:垂直补给值;adjust:是否相对窗口自动调整;rwindow:定位相对于窗口(align&vlign为center时垂直或水平居中)
    2010-10-10
  • jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

    jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

    这篇文章主要介绍了jQuery实现图片轮播效果的方法,该功能基于jquery.pack.js插件实现,涉及jQuery针对页面元素与样式的动态操作技巧,需要的朋友可以参考下
    2016-06-06

最新评论