<!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. servlet笔记

    开发servlet有三种方法: (1)    实现 Servlet接口 (2)    通过继承 GenericServlet (3)    通过继承 HttpServlet get提交和post提交的 ...

  2. Python反射函数

    python里面跟getattr相关的有hasattr,setattr,delattr  ,那么我们通过下面的例子,来详细的说说他们的用法. class Xiaorui: def __init__(s ...

  3. 试制品 （nyoj 542）

    模拟 a 反应物集合 ; b 生成物集合; c 存在的化合物或单质集合; ans 新生成化合物集合 1.如果反应无均在已生成的化合物集合中,则完成反应,将合成物加入c集合 2.对每个方程式的反应物进行 ...

  4. ssh爆破脚本

    前些天,基友发我一个ssh爆破工具,看起来很吊的样子.然后我就无聊自己写了个py脚本的. 单线程:慢成狗----- #coding:utf-8 #author:jwong import threadi ...

  5. PHP判断一个变量是否可以通过foreach进行遍历

    <?php if( !is_array( $items ) && !$items instanceof Traversable ) //Throw exception here ...

  6. COCOS2D-JS入门-官网template源码解析

    首先介绍几个概念: 导演: 导演 (Director)是Cocos2d-JS引擎抽象的一个对象,Director是整个Cocos2d-JS引擎的核心,是整个游戏的导航仪,游戏中的一些常用操作就是由Di ...

  7. DiskGenius(磁盘分区/数据恢复) 32位 V4.9.1 免费绿色版

    软件名称: DiskGenius(磁盘分区/数据恢复) 32位 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win 32位/64位 软件大小: 19.5MB 图片预览: 软件简介: Dis ...

  8. 常用的html标签大全

    html标签大全 一.文字 1.标题文字 <h#>..........</h#> #=1~6:h1为最大字,h6为最小字 2.字体变化 <font>........ ...

  9. GrowingIO 2016 数据驱动增长大会—— 一起做增长英雄

    GrowingIO 2016 数据驱动增长大会,首次聚齐了增长黑客之父 Sean Ellis .世界前十位前沿数据科学家张溪梦等数十位中美顶尖增长实践者: 链家.点融网.Camera360.量化派.北 ...

  10. Ansible Lookup

    1.  文件内容的读取 --- - hosts: all vars: contents: "{{ lookup('file', '/etc/foo.txt') }}" tasks: ...