jQuery实现伸展与合拢panel的方法

本文实例讲述了jQuery实现伸展与合拢panel的方法。分享给大家供大家参考。具体实现方法如下：

<!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伸展与合拢的Panel演示</title>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { padding: 5px; background: #96E555; cursor: pointer }
.content { padding: 10px; text-indent: 2em;
border-top: 1px solid #0050D0;display:block;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next("div.content").slideUp();
},function(){
$(this).next("div.content").slideDown();
})
})
</script>
</head>
<body>
<div id="panel">
<h5 class="head">点击这里</h5>
<div class="content">
展开和收起的内容！展开和收起的内容！展开和收起的内容！
展开和收起的内容！展开和收起的内容！展开和收起的内容！
展开和收起的内容！展开和收起的内容！
</div>
</div>
<div>http://www.jb51.net/</div>
</body>
</html>

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

赞 (0)

相关推荐

  • 在UpdatePanel内jquery easyui效果失效的解决方法

    在UpdatePanel内jquery easyui效果失效的解决方法

    使用easyui 的好处除了界面还不错之外,也因为使用方便. 复制代码 代码如下: <div class="easyui-tabs" style="width: 300px"> <div title="搜索"> ...</div> <div title="选择">...</div> <div title="返回">...</div

  • jQuery EasyUI Panel面板组件使用详解

    panel面板组件,跟前面的组件用法几乎都差不多,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 还有一点跟前面不同的就是面板内容可以请求远程数据. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <scr

  • jQuery EasyUI API 中文文档 - Panel面板

    jQuery EasyUI API 中文文档 - Panel面板

    用$.fn.panel.defaults重写defaults.用法示例 创建Panel 1. 经由标记创建Panel 从标记创建Panel更容易.把 'easyui-panel' 类添加到<div/>标记. 复制代码 代码如下: <div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;b

  • jquery插件制作 手风琴Panel效果实现

    首先我们还是创建一个html文件,里面包含如下的html结构. 复制代码 代码如下: <div id="pane-container"> <div class="pane"> <h1>first pane</h1> <p>this script should allow only one pane to be visible at a time.</p> </div> <div

  • 用jQuery打造TabPanel效果代码

    用jQuery打造TabPanel效果代码

    如大量信息查看,当网页多窗口框架等都会用到,现在网上基于jquery Tab控件,其实也蛮多了,我以前用过的idtabs,就比较简单实用,也是比较灵活,但是对于复杂情况就要编码多些,太简单了些.还有就是jquery UI的里面的tab控件(没用过,我对jquery ui不太感冒),另外就是近期有点小火的easyui 中的tab控件,最早在javaeye上面看到的,界面还算漂亮,因为之前没开源,所以一直没跟进(好像最近开源了,前几天下载了看看,编码风格有点像prototype,看不出jquery的

  • jQuery实现伸展与合拢panel的方法

    本文实例讲述了jQuery实现伸展与合拢panel的方法.分享给大家供大家参考.具体实现方法如下: <!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"&g

  • jQuery实现Tab菜单滚动切换的方法

    jQuery实现Tab菜单滚动切换的方法

    本文实例讲述了jQuery实现Tab菜单滚动切换的方法.分享给大家供大家参考.具体如下: 这是一款jQuery实现让你的Tab菜单滚动的代码,先运行一下看看效果咋样?是不是超不错,让你的网页变得灵动起来,不再静止,学习jquery的朋友也可作为范例来参考吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tab-menu-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W

  • jQuery插件artDialog.js使用与关闭方法示例

    本文实例讲述了jQuery插件artDialog.js使用与关闭方法.分享给大家供大家参考,具体如下: 子窗口关闭artdialog终极解决方案: window.parent.window.art.dialog({ id: 'qin123' }).close(); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

  • jQuery prototype冲突的2种解决方法(附demo示例下载)

    本文实例分析了jQuery prototype冲突的2种解决方法.分享给大家供大家参考,具体如下: jquery和prototype怎么会冲突,归根到底就是因为他们二个都用到了$,同时用,混淆了.这个问题解决过不下5次,每次解决都要查一下.淡疼,嘿嘿. 方法一.在jquery的核心库文件中加代码. 1.一般是jquery.js,或者jquery.min.js,有的带版本号的.知道是哪个文件就行. })( window ); jQuery.noConflict(); //最后面,加上这一行. 2.

  • jQuery焦点控制图层展示延迟隐藏的方法

    本文实例讲述了jQuery焦点控制图层展示延迟隐藏的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> <b id="button"

  • jquery使用正则表达式验证email地址的方法

    本文实例讲述了jquery使用正则表达式验证email地址的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jquery使用正则表达式验证email地址</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type=&qu

  • jquery+json实现数据二级联动的方法

    本文实例讲述了jquery+json实现数据二级联动的方法.分享给大家供大家参考,具体如下: function GetCityInfo1() { $("#ddlCITY1").empty(); //$("#ddlCOUNTY").empty(); var strId = $("#ddlPROVINCE1").attr("value"); $('#HiddenPro').val(strId); $.get("../as

  • Jquery简单实现GridView行高亮的方法

    本文实例讲述了Jquery简单实现GridView行高亮的方法.分享给大家供大家参考.具体实现方法如下: $("#gridID tr:not(tr:last-child)").filter(function () { return $('td', this).length && !('table', this).length }).hover(function () { $(this).toggleClass('hover_css'); }); 希望本文所述对大家的jQ

  • jQuery EasyUI的TreeGrid查询功能实现方法

    jQuery EasyUI的TreeGrid查询功能实现方法

    最近需要实现对treeGrid的查询功能,具体查询界面如下: 可以查询根节点和具体子节点的信息,开始使用EasyUI的TreeGrid的loadData 加载url的方式不能实现查询功能,于是利用异步AJAX查询了一下数据返回后,赋值给变量,然后利用 TreeGrid的loadData加载这个json格式的返回结果实现了对TreeGrid的查询功能,代码如下: function searchROM() { var product = $('#Product').combobox('getValu

  • JQuery的常用选择器、过滤器、方法全面介绍

    1.jQuery对象转换成DOM对象 a. var $cr = $("#cr"); //jQuery对象 var cr=$cr[0]; //DOM对象 alert(cr.checked); //检测checkbox是否被选中了 b. var $cr=$("#cr"); //jQuery对象 var cr=$cr.get(0); //DOM对象 alert(cr.checked); //检测checkbox是否被选中了 2.DOM对象转换成jQuery对象 var c

随机推荐