自强学堂
自强学堂:学习、分享、让你更强!
jQuery 实例HTMLCSSJAVASCRIPTJQUERYSQLPHPBOOTSTRAPANGULARXML
 
TPshop

jQuery Accordion

jQuery Accordion 插件用于创建折叠菜单。它通常与嵌套的列表、定义列表或嵌套的 div 一起使用。选项用于指定结构、激活的元素和定制的动画。

该插件现在是 jQuery UI 的一部分,独立的版本不会再更新了。目前版本是 1.6。

访问 jQuery Accordion 官网,下载 jQuery Accordion 插件。

如需了解更多有关 Accordion 的细节,请查看 API 文档 折叠面板部件(Accordion Widget)

实例演示

jQuery Accordion 插件演示。

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery Accordion 插件</title>
	
	<link rel="stylesheet" href="http://jquery.bassistance.de/accordion/demo/demo.css" />
	
	<script type="text/javascript" src="http://jquery.bassistance.de/accordion/lib/jquery.js"></script>
	<script type="text/javascript" src="http://jquery.bassistance.de/accordion/lib/chili-1.7.pack.js"></script>
	
	<script type="text/javascript" src="http://jquery.bassistance.de/accordion/lib/jquery.easing.js"></script>
	<script type="text/javascript" src="http://jquery.bassistance.de/accordion/lib/jquery.dimensions.js"></script>
	<script type="text/javascript" src="http://jquery.bassistance.de/accordion/jquery.accordion.js"></script>

	<script type="text/javascript">
	jQuery().ready(function(){
		// 简单的 accordion
		jQuery('#list1a').accordion();
		jQuery('#list1b').accordion({
			autoHeight: false
		});
		
		// 第二个简单的 accordion,带有特殊标记
		jQuery('#navigation').accordion({
			active: false,
			header: '.head',
			navigation: true,
			event: 'mouseover',
			fillSpace: true,
			animated: 'easeslide'
		});
		
		// 定制 accordion
		jQuery('#list2').accordion({
			event: 'mouseover',
			active: '.selected',
			selectedClass: 'active',
			animated: "bounceslide",
			header: "dt"
		}).bind("changeaccordion", function(event, ui) {
			jQuery('<div>' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown</div>').appendTo('#log');
		});
		
		// 第一个简单的 accordion,带有特殊标记
		jQuery('#list3').accordion({
			header: 'div.title',
			active: false,
			alwaysOpen: false,
			animated: false,
			autoHeight: false
		});
		
		var wizard = $("#wizard").accordion({
			header: '.title',
			event: false
		});
		
		var wizardButtons = $([]);
		$("div.title", wizard).each(function(index) {
			wizardButtons = wizardButtons.add($(this)
			.next()
			.children(":button")
			.filter(".next, .previous")
			.click(function() {
				wizard.accordion("activate", index + ($(this).is(".next") ? 1 : -1))
			}));
		});
		
		// 绑定到 select 的 change 事件,控制第一个和第二个 accordion
		// 与标签(tab)插件的 triggerTab() 类似,不带有额外的方法
		var accordions = jQuery('#list1a, #list1b, #list2, #list3, #navigation, #wizard');
		
		jQuery('#switch select').change(function() {
			accordions.accordion("activate", this.selectedIndex-1 );
		});
		jQuery('#close').click(function() {
			accordions.accordion("activate", -1);
		});
		jQuery('#switch2').change(function() {
			accordions.accordion("activate", this.value);
		});
		jQuery('#enable').click(function() {
			accordions.accordion("enable");
		});
		jQuery('#disable').click(function() {
			accordions.accordion("disable");
		});
		jQuery('#remove').click(function() {
			accordions.accordion("destroy");
			wizardButtons.unbind("click");
		});
	});
	</script>

</head>
<body>

<h1 id="banner">jQuery Accordion 插件演示</h1>
<div id="main">

	<fieldset>
		<legend>标准的,容器是一个 div,标题是 h3,内容是 div 和嵌套的 p。</legend>	

		<h3>代码</h3>
		<code class="mix">jQuery('#list1a').accordion();
jQuery('#list1b').accordion({
	autoHeight: false
});</code>

		<div class="basic" style="float:left;"  id="list1a">
			<a>There is one obvious advantage:</a>
			<div>
				<p>
					You've seen it coming!<br/>
					Buy now and get nothing for free!<br/>
					Well, at least no free beer. Perhaps a bear,<br/>
					if you can afford it.
				</p>
			</div>
			<a>Now that you've got...</a>
			<div>
				<p>
					your bear, you have to admit it!<br/>
					No, we aren't selling bears.
				</p>
			</div>
			<a>Rent one bear, ...</a>
			<div>
				<p>
					get two for three beer.
				</p>
				<p>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					Period.
				</p>
			</div>
		</div>
			
		<div class="basic" style="float:left; margin-left: 2em;" id="list1b">
			<a>There is one obvious advantage:</a>
			<div>
				<p>
					You've seen it coming!<br/>
					Buy now and get nothing for free!<br/>
					Well, at least no free beer. Perhaps a bear,<br/>
					if you can afford it.
				</p>
			</div>
			<a>Now that you've got...</a>
			<div>
				<p>
					your bear, you have to admit it!<br/>
					No, we aren't selling bears.
				</p>
			</div>
			<a>Rent one bear, ...</a>
			<div>
				<p>
					get two for three beer.
				</p>
				<p>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					And now, for something completely different.<br/>
					Period.
				</p>
			</div>
		</div>
		
	</fieldset>
		
	<fieldset>
		<legend>导航 - 带有锚和嵌套列表的无序列表。</legend>
		<p>基于位置的保存状态:激活的元素是基于 location.hash 被选中的:点击其中一个链接,重新载入页面。</p>

		<h3>代码</h3>
		<code class="mix">jQuery('#navigation').accordion({
	active: false,
	header: '.head',
	navigation: true,
	event: 'mouseover',
	fillSpace: true,
	animated: 'easeslide'
});</code>
		<div  style="height:250px;margin-bottom:1em;">
			<ul id="navigation">
				<li>
					<a class="head" href="?p=1.1.1">Guitar</a>
					<ul>
						<li><a href="?p=1.1.1.1">Electric</a></li>
						<li><a href="?p=1.1.1.2">Acoustic</a></li>
						<li><a href="?p=1.1.1.3">Amps</a></li>
						<li><a href="?p=1.1.1.4.1">Effects A</a></li>
						<li><a href="?p=1.1.1.4.2">Effects B</a></li>
						<li><a href="?p=1.1.1.4.3">Effects C</a></li>
						<li><a href="?p=1.1.1.4.4">Effects D</a></li>
						<li><a href="?p=1.1.1.5">Accessories</a></li>
					</ul> 
				</li>
				<li>
					<a class="head" href="?p=1.1.2">Bass</a>
					<ul>
						<li><a href="?p=1.1.2.1">Electric</a></li>
						<li><a href="?p=1.1.2.2">Acoustic</a></li>
						<li><a href="?p=1.1.2.3">Amps</a></li>
						<li><a href="?p=1.1.2.4">Effects</a></li>
						<li><a href="?p=1.1.2.5">Accessories</a></li>
					</ul> 
				</li>
				<li>
					<a class="head" href="?p=1.1.3">Drums</a>
					<ul>
						<li><a href="?p=1.1.3.2">Acoustic Drums</a></li>
						<li><a href="?p=1.1.3.3">Electronic Drums</a></li>
						<li><a href="?p=1.1.3.4">Cymbals</a></li>
						<li><a href="?p=1.1.3.5">Hardware</a></li>
						<li><a href="?p=1.1.3.6">Accessories</a></li>
					</ul> 
				</li>
			</ul>
		</div>
		
	</fieldset>

	<fieldset>
		<legend>带有选项的,容器是一个定义列表,标题是 dt,内容是 dd。</legend>
		
		<h3>代码</h3>
		<code class="mix">jQuery('#list2').accordion({
	event: 'mouseover',
	active: '.selected',
	selectedClass: 'active',
	animated: "bounceslide",
	header: "dt"
}).bind("change.ui-accordion", function(event, ui) {
	jQuery('&lt;div&gt;' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown&lt;/div&gt;').appendTo('#log');
});</code>

		<dl id="list2">
			<dt class="red">Red</dt>
			<dd>
				Fancy stuff about red thingies.
			</dd>
			<dt class="green selected">Green</dt>
			<dd>
				Green! Green! Green!
			</dd>
			<dt class="blue">Blue</dt>
			<dd>
				Cool kids are blue.
			</dd>
		</dl>
		
	</fieldset>

	<fieldset>
		<legend>Divitus 结构,div 容器,div 标题(class="title"),div 内容,开始状态时没有打开的面板,面板可被完全关闭。</legend>
		
		<h3>代码</h3>
		<code class="mix">jQuery('#list3').accordion({
	header: 'div.title',
	active: false,
	alwaysOpen: false,
	animated: false,
	autoHeight: false
});</code>

		<div id="list3">
			<div>
				<div class="title">Tennis</div>
				<div>
					One ball, two players. Lots of fun.
				</div>
			</div>
			<div>
				<div class="title">Soccer</div>
				<div>
					One ball, 22 players. Lots of fun. <a href="http://google.com">Go to google?</a>
				</div>
			</div>
			<div>
				<div class="title">Baseball</div>
				<div>
					<p>
						Well, one ball, some guys running around, some guys hitting others with a stick.<br/>
						Sounds like fun, doesn't it?
					</p>
					<p>
						Well, apart from the running part.
						<a href="#navigation">Navigation example</a>
					</p>
				</div>
			</div>
		</div>
		
	</fieldset>
	
	<fieldset>
		<legend>accordion 向导</legend>
		
		<h3>代码</h3>
		<code class="mix">var wizard = $("#wizard").accordion({
	header: '.title',
	event: false
});

$("div.title", wizard).each(function(index) {
	$(this)
	.next()
	.children(":button")
	.filter(".next, .previous")
	.click(function() {
		wizard.changeAccordion("activate", index + ($(this).is(".next") ? 1 : -1))
	});
});</code>
	
		<div id="wizard">
			<div>
				<div class="title">标题 1</div>
				<div>
					内容 1<br/>
					<input type="button" class="next" value="下一个" />
				</div>
			</div>
			<div>
		
				<div class="title">标题 2</div>
				<div>
					内容 2<br/>
					<input type="button" class="previous" value="上一个"/>
					<input type="button" class="next" value="下一个"/>
				</div>
			</div>
			<div>
				<div class="title">标题 3</div>
		
				<div>
					内容 3<br/>
					<input type="button" class="previous" value="上一个"/>
				</div>
			</div>
		
		
		</div>
		<br /><br /><br /><br /><br />
	</fieldset>
	
	<div id="switch" style="background-color:grey;padding:10px;">
		<select>
			<option>切换到...</option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button id="close">关闭全部</button>
		<button id="enable">启用全部</button>
		<button id="disable">禁用全部</button>
		<button id="remove">移除全部</button>
		<br />通过选择器激活,例如 ':first' 或 ':eq(1)': <input id="switch2" />
	</div>

	<div id="log" style="background-color:grey;padding:10px;"><div><strong>Log</strong></div></div>
</div>

</body>
</html>