首先将折叠菜单的每个内容放到一个li里面，再定义li的css样式，这里要注意，左上角的三角形，使用border写的。另外，展开的li，给它加上了active样式。由于非常简单，就不阐述了，直接上代码：
css代码：
/*重置样式*/
*{margin:0; padding:0;}
ul,li{list-style:none;}
/*案例样式*/
ul{width:367px; margin:auto;}
li{position:relative; padding-top:30px; background:#333; border:1px solid #333; border-bottom-color:#fff; cursor:pointer;}
li i{border:5px solid transparent; position:absolute; right:10px; top:10px; border-top-color:#fff;}
li.active i{border-top-color:transparent; border-bottom-color:#fff; top:5px;}
li div{display:none}
html代码：
<ul>
<li class="active">
<i></i>
<div style="display:block">
<img src="http://www.5imoban.net/view/demoimg/easing1.jpg" />
</div>
</li>
<li>
<i></i>
<div>
<img src="http://www.5imoban.net/view/demoimg/easing2.gif" />
</div>
</li>
<li>
<i></i>
<div>
<img src="http://www.5imoban.net/view/demoimg/easing3.gif" />
</div>
</li>
<li>
<i></i>
<div>
<img src="http://www.5imoban.net/view/demoimg/easing1.jpg" />
</div>
</li>
<li>
<i></i>
<div>
<img src="http://www.5imoban.net/view/demoimg/easing2.gif" />
</div>
</li>
</ul>
折叠这个动作，用jQuery写的，当点击li是，用$(this)指定当前点击的li，给它加上active样式，并通过他，找到它的兄弟节点，去除 active 样式。同时，给它里面的内容——div 展开动画，通过这个div找到其他div，都给 合上的动画：
jQuery代码：
$("ul li").click(function(){
$(this).addClass("active").siblings().removeClass("active");
$(this).find("div").slideDown().parent().siblings().find("div").slideUp();
})
运行下面的代码，查看最终效果：
提示：您可以先修改部分代码再运行