*{ padding:0; margin:0; }
body{ background:#fafafa; font-size:12px; }
.slider{ line-height:24px; width:700px; color:#7ecef4; margin:10px auto; background:#010e16; }
.slider dt{ background:#f5f5d2; padding-left:30px; cursor:pointer; overflow:hidden; background:#1b1b1b; border-bottom:1px solid #fff; height:32px; line-height:32px; }
.slider dt.slider_open{background:#707070; color:# }
.slider dd{ display:none; background:#f1f1ea; height:90px; background:#111; border-bottom:1px dashed #fafafa; overflow:hidden;}
.slider dd p{ padding:10px 20px; overflow:hidden; }
$(function(){
//初始化变量
var flag = 0;
var $dt = $('.slider dt');
var $dd = $('.slider dd');
//初始化状态
$dd.eq(0).show();
$dt.eq(0).css('cursor','default');
//单击事件
$dt.click(function(){
if($dt.index(this) == flag) return false;
flag = $dt.index(this);
$dd.not($dd.eq(flag)).slideup();
$dd.eq(flag).slidedown();
$dt.eq(flag).css('cursor','default').addclass('slider_open');
$dt.not($dt.eq(flag)).css('cursor','pointer').removeclass('slider_open');
});
});
如果是通过网页运行代码的,需要刷新下才能看到效果。
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]