ifireyy

还在使用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');
  }
 });
});

一个简单的效果看这里