Jquery的UI中是有Accordion的,200余行代码配合themes带来的负担,让使用前不可不慎重考虑。

仔细分析一下Accordion的动作其实很简单,顺序排列的N个元素,页面载入时只显示其中一个,点击某个元素时,展开当前元素并隐蔽其他。

那么配合JQuery强大的选择器,完全可以用几行代码打造自己的轻量级Accordion。

例如如下结构的UL列表

<ul id="accordion">
	<li>
		<span>List Title</span>
		<ul>
		<li>List</li>
		<li>List</li>
		</ul>
	</li>
	<li>
		<span>List Title2</span>
		<ul>
		<li>List</li>
		<li>List</li>
		</ul>
	</li>
</ul>

对于这个列表进行操作:

//页面载入时隐蔽除第一个元素外所有元素
$("#accordion > li > span + *:not(:first)").hide();
//对所有元素的标题绑定点击动作
$('#accordion > li > span').click(function(){
	$(this).parent().parent().each(function(){
		//隐蔽所有元素
		$("> li > span + *",this).slideUp();
	});
	//展开当前点击的元素
	$("+ *",this).slideDown();
});

总共不过7行,当然选择对象部分需要根据自己的情况灵活指定。

具体可以参看DEMO

PS:ASUS Eee,华硕又见华硕,难道我是ASUS控么- -|||


 Tags : YD的程序员葛阁 jQuery javascript UI Accordion

Donate:Buy me a coffee  | 文章有帮助,可以请我喝杯咖啡

Lazing

我比较好奇,后面一句是干啥的?

Lazing

AlloVince

只是抒发一下对ASUS的怨念- -,Eee的USB启动做的极不友好,真怀疑主板是代工的- -#

AlloVince

It's amazing!