还在使用mootools的时候，就非常喜欢这个Accordion（折叠菜单）效果，特别是slideUp和slideDown的滑动，接近flash的效果。今天我们就来用jquery来制作一个简单的Accordion效果。
首先准备好html结构，因为是针对sandbox template，它的sidebar结构是这样的：
<div class="sidebar">
<ul class="xoxo">
<li class="widget">
<h3 class="widget-title">content 1</h3>
<ul>
<li>this is content under content 1</li>
<li>this is content under content 1</li>
</ul>
</li>
<li class="widget">
<h3 class="widget-title">content 2</h3>
<ul>
<li>this is content under content 2</li>
<li>this is content under content 2</li>
</ul>
</li>
</ul>
</div>有了结构，我们就可以开始对结构做文章了，先把所有需要折叠的内容先隐藏：
$('li.widget > ul').hide();这里我们使用的 > 相似于CSS中的一级子元素选择符，隐藏所有第一级的ul元素。
接着我们设定折叠的控制器，本例中我们使用h3：
$('li.widget > h3').click(function() {
var content = $(this).next();
content.slideToggle('fast');
});用next()来获得跟h3平级的下一个元素，也就是我么不能够结构中的ul，然后用slideToggle来执行折叠动作，也就是slideUp和slideDown。这时候我们已经可以进行正常的折叠操作了，但是我想要做到同时只能展开一个内容，该如何处理？
其实也不难，jquery的Selectors很强大，看看怎么做：
var others = content.parent().siblings("li.widget").find("ul:visible");这里的parent()用来获取父元素，find()就是遵循一定的规则（使用Selectors）去查找符合条件的元素，本例中查找li.widget下的所有visible（CSS属性visibility:visible; 也就是本例中被展开的）的ul元素。
最后我们得到这样的内容：
$(document).ready(function(){
$('li.widget > ul').hide();
$('li.widget > h3').click(function() {
var content = $(this).next();
var others = content.parent().siblings("li.widget").find("ul:visible");
if (others.length ) {
others.slideUp('fast', function() {
content.slideToggle('fast');
});
} else {
content.slideToggle('fast');
}
});
});一个简单的效果看这里
