• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > JQuery实现展开关闭层的方法

JQuery实现展开关闭层的方法

作者:代码家园 字体:[增加 减小] 来源:互联网 时间:2017-08-16

代码家园 通过本文主要向大家介绍了JQuery,展开,关闭层,方法等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

本文实例讲述了JQuery实现展开关闭层的方法。分享给大家供大家参考。具体实现方法如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery打造的展开/关闭层效果</title>
<script type="text/javascript" src="/images/jquery.js"></script>
<script type="text/javascript">
$(function()
{

$("#mostrar").click(function(event) {
event.preventDefault();
$("#caja").slideToggle();
});

$("#caja a").click(function(event) {
event.preventDefault();
$("#caja").slideUp();
});
});
</script>
<style type="text/css">
body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #666666;
}
a{color:#993300; text-decoration:none;}
#caja {
width:70%;
display: none;
padding:5px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
}
#mostrar{
display:block;
width:70%;
padding:5px;
border:2px solid #D0E8F4;
background-color:#ECF8FD;
}
</style>
</head>
<body>
<a href="#" id="mostrar">点击展开详细……(若效果失效 ,请刷新本页面,载入jquery后就正常了!)</a>

<div id="caja">
<a href="#" class="close">[x]关闭</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</body>
</html>

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

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 2017-08-16jQuery遍历之next()、nextAll()方法使用实例
  • 2017-08-16jQuery插件实现带圆点的焦点图片轮播切换
  • 2017-08-16jQuery设置和移除文本框默认值的方法
  • 2017-08-16JQuery从头学起第三讲
  • 2017-08-16基于jquery实现复选框全选,反选,全不选等功能
  • 2017-08-16qTip 基于JQuery的Tooltip插件[兼容性好]
  • 2017-08-16jquery.validate使用时遇到的问题
  • 2017-08-16jquery.fastLiveFilter.js实现输入自动过滤的方法
  • 2017-08-16让新消息在网页标题闪烁提示的jQuery代码
  • 2017-08-16JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery实现异步获取json数据的2种方式
    • jqeury eval将字符串转换json的方法
    • jquery实现带单选按钮的表格行选中时高亮显示
    • CSS+Jquery实现页面圆角框方法大全
    • jQuery 1.2.x 升級 1.3.x 注意事项
    • 浅谈jQuery中height与width
    • jquery实现全选功能效果的实现代码
    • jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
    • Checbox的操作含已选、未选及判断代码
    • jquery uploadify隐藏上传进度的实现方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有