<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 折叠面板（Accordion） - 默认功能</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>

<div id="accordion">
<h3>部分 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>部分 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3>部分 3</h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>部分 4</h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>


</body>
</html>

jquery 画板折叠的更多相关文章

  1. jquery 展开折叠菜单

    jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...

  2. jquery侧边折叠导航栏制作，两行代码搞定

    jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...

  3. jQuery实现折叠下拉效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. jQuery EasyUI 折叠面板accordion的使用实例

    1.对折叠面板区域 div 设置 class=”easyui-accordion” 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性). 3.设置面板属 ...

  5. Jquery Accordion 折叠面板

    属性 类型 默认值 active Boolean/Number/jQuery/Selector/Element 第一个面板 设定默认显示的面板.设置为 false 时默认不显示面板,需 collaps ...

  6. jquery 展开折叠效果

    仅供参考  图片 jquery.js 自己处理 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...

  7. jquery文本折叠

    /** * Created by dongdong on 2015/4/28. */(function($){ var defaults = { height:40, //文本收起后的高度 speed ...

  8. jquery左右折叠框

    网站左右折叠框: <!DOCTYPE html> <html> <style> #Kefclose,#Kefopen{position:absolute;left: ...

  9. BootStrap_04之jQuery插件（导航、轮播）、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...

随机推荐

  1. jquery通过attr取html里自定义属性原来这么方便啊

    <script type="text/javascript"> function fangGouWuChe(obj) { //放入购物车  var sMat = $(o ...

  2. MFC中CListCtrl说明

    转载:http://blog.csdn.NET/lhy2199/article/details/5177032 listctrl默认view 风格为report CListCtrl类封装"列 ...

  3. 在Windows上创建同样的Linux操作环境

    在之前的文章中,介绍了我在GNU/Linux图形界面环境下所使用的工具集合.其基本目的是在保证占用最少系统资源的条件下,将电脑操作效率推向极致.这样的工具组合尤如瑞士军刀一般,简洁.高效.功能全面.与 ...

  4. leetcode & lintcode for bug-free

    刷题备忘录,for bug-free leetcode 396. Rotate Function 题意: Given an array of integers A and let n to be it ...

  5. hdu 1907 John&& hdu 2509 Be the Winner（基础nim博弈）

    Problem Description Little John is playing very funny game with his younger brother. There is one bi ...

  6. Linux的一些简单命令(四)-用户和组账户管理

    linux操作系统是一个多用户操作系统,它允许多用户同时登录到系统上并使用资源.系统会根据账户来区分每个用户的文件,进程,任务和工作环境,使得每个用户工作都不受干扰 1.保存用户信息的文件:/etc/ ...

  7. EasyCHM(CHM电子书制作工具) v3.84.545 绿色版

    软件名称:EasyCHM(CHM电子书制作工具) v3.84.545 绿色版 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win 32位/64位 软件大小: 2.78MB 图片预览: 软件 ...

  8. PHP基础语法思维导图

  9. html5 -----audio标签

    在现在的公司上班需要做一个html5页面,上下可以滑动的,在页面上需要音乐,默认开始音乐播放,点击音乐标签后音乐停止.后来在项目开发中,遇到性能优化的问题,所以我建议大家以后在使用时不要直接在页面中使 ...

  10. Python学习笔记——基础篇【第四周】——迭代器&生成器、装饰器、递归、算法、正则表达式

    目录 1.迭代器&生成器 2.装饰器 a.基本装饰器 b.多参数装饰器 3.递归 4.算法基础:二分查找.二维数组转换 5.正则表达式 6.常用模块学习 #作业:计算器开发 a.实现加减成熟及 ...