js:

<script type="text/javascript">
$('#p2').panel({
title: 'panel1',
closable: false,
collapsible: true,
border: false,
collapsed: true,
//href: "url",
onOpen: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
},
onBeforeCollapse: function () {
$($(this).panel('header')).removeClass('openPanelClass');
},
onBeforeExpand: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
} });
$($('#p2')).panel('header').click(function () {
$('#p2').panel('expand', true);
$('#p2').panel('collapse', true);
});
$('#p3').panel({
title: 'panel2',
closable: false,
collapsible: true,
border: false,
collapsed: true,
//href: "url",
onOpen: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
},
onBeforeCollapse: function () {
$($(this).panel('header')).removeClass('openPanelClass');
},
onBeforeExpand: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
}
});
$($('#p3')).panel('header').click(function () {
$('#p3').panel('expand', true);
$('#p3').panel('collapse', true);
});
$('#p4').panel({
title: 'panel3',
closable: false,
collapsible: true,
border: false,
collapsed: true,
//href: "url",
onOpen: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
},
onBeforeCollapse: function () {
$($(this).panel('header')).removeClass('openPanelClass');
},
onBeforeExpand: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
}
});
$($('#p4')).panel('header').click(function () {
$('#p4').panel('expand', true);
$('#p4').panel('collapse', true);
});
$('#p5').panel({
title: 'panel4',
closable: false,
collapsible: true,
border: false,
collapsed: true,
//href: "url",
onOpen: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
},
onBeforeCollapse: function () {
$($(this).panel('header')).removeClass('openPanelClass');
},
onBeforeExpand: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
}
});
$($('#p5')).panel('header').click(function () {
$('#p5').panel('expand', true);
$('#p5').panel('collapse', true);
});
</script>

html:

  

    <div style="margin: 5px">
<div id="p2" style="width: 985px;"> </div>
</div>
<div style="margin: 5px">
<div id="p3" style="width: 985px;"> </div>
</div>
<div style="margin: 5px">
<div id="p4" style="width: 985px;"> </div>
</div>
<div style="margin: 5px">
<div id="p5" style="width: 985px;"> </div>
</div>

panel的展开,关闭的一种应用。的更多相关文章

  1. jquery 展开关闭效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 简洁的支持展开关闭的tab标签代码

    简洁的支持展开关闭的tab标签代码,由huiyi8素材网提供. TAB标签代码下载:http://www.huiyi8.com/tab/

  3. SELinux 宽容模式(permissive) 强制模式(enforcing) 关闭(disabled) 几种模式之间的转换

    http://blog.sina.com.cn/s/blog_5aee9eaf0100y44q.html 在CentOS6.2 中安装intel 的c++和fortran 的编译器时,遇到来一个关于S ...

  4. 解决DWZ(JUI)的panel 点击关闭或者打开按钮 自己写的标签消失

    问题描述:DWZ的panel面板比较常用,我们常常需要在其标题栏上再增加一个些按钮,如下图问题出来了,增加按钮后,点面板收缩按钮,增加的按钮就消失了而且面板收缩的click事件,也跟新增的按钮绑定了, ...

  5. 关于win8.1“连接被远程计算机关闭”的一种解决方案

    我就是连接的时候出现"连接被远程计算机关闭",然后想着可能是win8更新之后网络协议 出问题了,后来无意中发现e信在第一次启动的时候会在网络适配器中会多出很多网卡,其中三个是带感叹 ...

  6. IOS 实现QQ好友分组展开关闭功能

    贴出核心代码  主要讲一下思路. - (void)nameBtnClick:(myButton *)sender { //获取当前点击的分组对应的section self.clickIndex = s ...

  7. HTML页面中点击按钮关闭页面几种方式与取消

    1.不带任何提示关闭窗口的js代码 <input type="button" name="close" value="关闭" oncl ...

  8. Oracle开启和关闭的四种模式

    >1 启动数据库 在cmd命令窗口,直接输入"sqlplus",直接进入oracle管理界面,输入用户名和密码后,开始启动数据库,启动数据库三个步骤:启动实例.加载数据库.打 ...

  9. C#启动外部程序以及等待外部程序关闭的几种方法

    1. 启动外部程序,不等待其退出. 2. 启动外部程序,等待其退出. 3. 启动外部程序,无限等待其退出. 4. 启动外部程序,通过事件监视其退出. // using System.Diagnosti ...

随机推荐

  1. beautifulSoup(1)

    import re from bs4 import BeautifulSoupdoc = ['<html><head><title>Page title</t ...

  2. 关于java中MessageFormat.format中单引号问题

    我们知道java中可以用MessageFormat.format来格式化字符串.这个方法在我们的实际开发中经常用到,有点类似模板,这样我们就不需要用很恶心的拼接字符串了.如下面 String s1=& ...

  3. Eclipse Kelper 设置代理服务器无效解决方案

    Open Network Connection Settings. Select Active Provider to "Manual". Set HTTP/HTTPS proxy ...

  4. MySql access denied for user错误

    MySql access denied for user错误 | 浏览:2812 | 更新:2014-11-27 11:16 MySql access denied for user错误 方法/步骤 ...

  5. [django]django xlrd处理xls中日期转换问题

    xlrd会把xls文件中比如20160--03-01类型的时间转换成整数,那么我们如何保证xlrd读取进来的时间为2016-03-01格式呢? 使用xlrd中的xldate_as_tuple函数 代码 ...

  6. Linux档案与目录管理

    Linux档案与目录管理1. 目录与路径1.1 相对路径与绝对路径1.2 目录的相关操作: cd, pwd, mkdir, rmdir cd [相对路径或绝对路径]cd ~ [用户]: 切换家目录cd ...

  7. Gradle 10分钟上手指南

    java的源码构建工具,大致经历了 ant -> maven -> gradle 这个过程,每一次进步,都是在解决之前的工具所带来的问题,简单来说: 1. ant 功能虽然也很强大,但是过 ...

  8. VMware Workstation中网络连接之桥接、NAT和Host-only

    在Windows XP系统中,安装好VMware Workstation虚拟机软件以后,我们可以查看一下"网络连接"窗口: 在窗口中多出了两块网卡: VMware Network ...

  9. 作业一:android开发平台的演变以及Android Studio设置

    目录:     ①. 从Eclipse到Android Studio   ②. Android Studio的下载和安装   ③. 用户习惯设置以及快捷键   ④. SDK路径重新设置 ↓点此跳转到文 ...

  10. memcached

    Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度.Memcached ...