jQuery Accordion 鎻掍欢婕旂ず 瀹炰緥

鏍囧噯鐨勶紝瀹瑰櫒鏄竴涓 div锛屾爣棰樻槸 h3锛屽唴瀹规槸 div 鍜屽祵濂楃殑 p銆

浠g爜

jQuery('#list1a').accordion();
jQuery('#list1b').accordion({
	autoheight: false
});
There is one obvious advantage:

You've seen it coming!
Buy now and get nothing for free!
Well, at least no free beer. Perhaps a bear,
if you can afford it.

Now that you've got...

your bear, you have to admit it!
No, we aren't selling bears.

Rent one bear, ...

get two for three beer.

And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
Period.

There is one obvious advantage:

You've seen it coming!
Buy now and get nothing for free!
Well, at least no free beer. Perhaps a bear,
if you can afford it.

Now that you've got...

your bear, you have to admit it!
No, we aren't selling bears.

Rent one bear, ...

get two for three beer.

And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
Period.

瀵艰埅 - 甯︽湁閿氬拰宓屽鍒楄〃鐨勬棤搴忓垪琛

鍩轰簬浣嶇疆鐨勪繚瀛樼姸鎬侊細婵娲荤殑鍏冪礌鏄熀浜 location.hash 琚変腑鐨勶細鐐瑰嚮鍏朵腑涓涓摼鎺ワ紝閲嶆柊杞藉叆椤甸潰銆

浠g爜

jQuery('#navigation').accordion({
	active: false,
	header: '.head',
	navigation: true,
	event: 'mouseover',
	fillSpace: true,
	animated: 'easeslide'
});
甯︽湁閫夐」鐨勶紝瀹瑰櫒鏄竴涓畾涔夊垪琛紝鏍囬鏄 dt锛屽唴瀹规槸 dd銆

浠g爜

jQuery('#list2').accordion({
	event: 'mouseover',
	active: '.selected',
	selectedClass: 'active',
	animated: "bounceslide",
	header: "dt"
}).bind("change.ui-accordion", function(event, ui) {
	jQuery('<div>' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown</div>').appendTo('#log');
});
Red
Fancy stuff about red thingies.
Green
Green! Green! Green!
Blue
Cool kids are blue.
Divitus 缁撴瀯锛宒iv 瀹瑰櫒锛宒iv 鏍囬锛坈lass="title"锛夛紝div 鍐呭锛屽紑濮嬬姸鎬佹椂娌℃湁鎵撳紑鐨勯潰鏉匡紝闈㈡澘鍙瀹屽叏鍏抽棴銆

浠g爜

jQuery('#list3').accordion({
	header: 'div.title',
	active: false,
	alwaysOpen: false,
	animated: false,
	autoheight: false
});
Tennis
One ball, two players. Lots of fun.
Soccer
One ball, 22 players. Lots of fun. Go to google?
Baseball

Well, one ball, some guys running around, some guys hitting others with a stick.
Sounds like fun, doesn't it?

Well, apart from the running part. Navigation example

accordion 鍚戝

浠g爜

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))
	});
});
鏍囬 1
鍐呭 1
鏍囬 2
鍐呭 2
鏍囬 3
鍐呭 3

閫氳繃閫夋嫨鍣ㄦ縺娲伙紝渚嬪 ':first' 鎴 ':eq(1)':
鏃ュ織