展开折叠控件实现
近来一直在瞎折腾，想找一个靠谱点儿的公司（问我什么公司靠谱，其实俺也不知道），起码能按时发工资吧！不论结果如何，总归能了解一些东西，也让自己更清楚自己
的专业水平，以及需要努力的方向......废话就不多说了，看看今天的好东西吧！！！............................................................以下是正文..........................................................................
一、先看效果
看到这个图，我想明白要实现的效果了
二、代码
css
<style type="text/css">
body {
font-family: "Microsoft YaHei",arial,courier new,courier,"宋体",monospace;
font-size:16px;
color: #333;
}
*{
margin: 0;
padding:0;
list-style-type:none;
border:none;
}
a{ text-decoration: none; color: #337ab7;}
p{ padding: 10px 0;line-height: 1.5;}
#accordion_wrap{
width: 300px;
border-radius: 4px;
border:1px solid #ccc;
margin-left: 10px;
margin-top: 10px;
}
dl{margin-bottom: 0px;}
.accordion dd{
display: none;
padding: 0 10px;
border-bottom: 1px solid #ccc;
}
.accordion dt{
line-height: 44px;
border-bottom: 1px dashed #ccc;
}
.accordion dt a{
padding-left: 20px;
background: url(image/accordion_nomarl.jpg) 5px 5px no-repeat;
}
.accordion dt .active{
background: url(image/accordion_active.jpg) 5px 8px no-repeat;
}
.last_style dt{ border-bottom: none;}
.last_style dd{ border-bottom: none;}
.last_active dt{ border-bottom: 1px dashed #ccc;}
.last_active dd{ border-bottom: none;}
</style>
html
<div id="accordion_wrap">
<dl class="accordion">
<dt><a href="#"><span>title goes here</span></a></dt>
<dd><p>一个周日的下午，当我阅读有关哥伦比亚号航天飞机事故中丧生的宇航员的传记时，我的脑海中又浮现出那个船工在演奏手风琴的情景。</p></dd>
</dl>
<dl class="accordion">
<dt><a href="#"><span>title goes here</span></a></dt>
<dd><p>一个周日的下午，当我阅读有关哥伦比亚号航天飞机事故中丧生的宇航员的传记时，我的脑海中又浮现出那个船工在演奏手风琴的情景。</p></dd>
</dl>
<dl class="accordion">
<dt><a href="#"><span>title goes here</span></a></dt>
<dd><p>一个周日的下午，当我阅读有关哥伦比亚号航天飞机事故中丧生的宇航员的传记时，我的脑海中又浮现出那个船工在演奏手风琴的情景。</p></dd>
</dl>
<dl class="accordion last_style">
<dt><a href="#"><span>title goes here</span></a></dt>
<dd><p>一个周日的下午，当我阅读有关哥伦比亚号航天飞机事故中丧生的宇航员的传记时，我的脑海中又浮现出那个船工在演奏手风琴的情景。</p></dd>
</dl>
</div>
jQuery
<script type="text/javascript">
function init_accordtion(){
//元素是否存在，若不存在则退出
if (!$('.accordion').length) { return;}
//收集所有折叠项
$('dl.accordion').eq(0).find('dt a').addClass('active').end().find('dd').show();
//单击事件监听器
$('dl.accordion dt a').on('click', function(){
//
var $dt = $(this).parent(); // 双亲dt节点
var $dd =$(this).parent().next(); //对应的dd内容
var $sibling_dl = $dt.parent().siblings();//祖先dl元素的同胞元素
//这个函数的作用是为最后一个dl控制样式的
function findLast(){
if ($('#accordion_wrap').find('dl:last').find('dd').is(':hidden')) {
$('#accordion_wrap').find('dl:last').removeClass('last_active').addClass('last_style');
}else{
$('#accordion_wrap').find('dl:last').removeClass('last_style').addClass('last_active');
}
}
// 点击事件的核心代码
if ($dd.is(':hidden')) {
$(this).addClass('active');
$dd.slideDown('fast').parent().siblings().find('dt a').removeClass('active').end().find('dd:visible').slideUp('fast',findLast);
};
this.blur();
return false;
});
}//
init_accordtion();
</script>
小结：简单说说我对jQuery库编写效果的体会，看似编写的很复杂。其实jQuery对DOM元素的操作分为两步，一步是核心代码，实现可操作效果的；一步是样式的切换，也就是默认一种样式，触发时一种样式。在编写jQuery时可以先
脱离样式，实现核心代码，然后再添加样式，这样就思路清晰明了。
