jquery手风琴

--js

$(document).ready(function(){

//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});

});

 

--html


<div class="study-con">
<h5 class="plate-tit">学习计划</h5>
<dl class="tucked">
<dt class="acc_trigger active"><a href="#">第一章</a></dt>
<dd class="acc_container" style="display: block;">
<ul>
<li>· <a href="#">测量</a></li>
<li>· <a href="#">万以内的加法...</a></li>
<li>· <a href="#">四边形</a></li>
<li>· <a href="#">有余数的除法</a></li>
<li>· <a href="#">时、分、秒</a></li>
<li>· <a href="#">多位数乘一位数</a></li>
<li>· <a href="#">分数的初步认识</a></li>
<li>· <a href="#">可能性</a></li>
</ul>
</dd>
</dl>
<dl class="tucked">
<dt class="acc_trigger"><a href="#">第二章</a></dt>
<dd class="acc_container" style="display: none;">
<ul>
<li>· <a href="#">测量</a></li>
<li>· <a href="#">万以内的加法...</a></li>
<li>· <a href="#">四边形</a></li>
<li>· <a href="#">有余数的除法</a></li>
<li>· <a href="#">时、分、秒</a></li>
<li>· <a href="#">多位数乘一位数</a></li>
<li>· <a href="#">分数的初步认识</a></li>
<li>· <a href="#">可能性</a></li>
</ul>
</dd>
</dl>
<dl class="tucked">
<dt class="acc_trigger"><a href="#">第三章</a></dt>
<dd class="acc_container" style="display: none;">
<ul>
<li>· <a href="#">测量</a></li>
<li>· <a href="#">万以内的加法...</a></li>
<li>· <a href="#">四边形</a></li>
<li>· <a href="#">有余数的除法</a></li>
<li>· <a href="#">时、分、秒</a></li>
<li>· <a href="#">多位数乘一位数</a></li>
<li>· <a href="#">分数的初步认识</a></li>
<li>· <a href="#">可能性</a></li>
</ul>
</dd>
</dl>
<dl class="tucked">
<dt class="acc_trigger"><a href="#">第四章</a></dt>
<dd class="acc_container" style="display: none;">
<ul>
<li>· <a href="#">测量</a></li>
<li>· <a href="#">万以内的加法...</a></li>
<li>· <a href="#">四边形</a></li>
<li>· <a href="#">有余数的除法</a></li>
<li>· <a href="#">时、分、秒</a></li>
<li>· <a href="#">多位数乘一位数</a></li>
<li>· <a href="#">分数的初步认识</a></li>
<li>· <a href="#">可能性</a></li>
</ul>
</dd>
</dl>
</div>

 

--css


.study-con{box-shadow:0 1px 6px rgba(0,0,0,0.1); margin-bottom:-1px}
.study-con dl{ background:#fff; border-bottom:1px solid #fff}
.study-con dd{ padding:0 0 10px 10px;white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.study-con dd a{ display:inline-block; font-size:12px;margin-right:0}

.study-con dt.acc_trigger{ cursor:pointer; background:#f8f8f8 url(../images/plate-down.gif) no-repeat 95% center}
.study-con dt.active{ background:#f8f8f8 url(../images/plate-up.gif) no-repeat 95% center}
.study-con dt.active a{ background:url(../images/plate1_2.gif) no-repeat 0 center}

.study-con dd.acc_container a{ width:190px; text-align:left; margin:0; line-height:28px; border:0; background:url(../images/san.png) no-repeat right center}
.study-con dd.acc_container ul{ margin-top:10px}
.plate-con dl.tucked{ border-bottom:1px solid #fff}