一般左边后台点击收缩展开的效果

   html代码：

<dl>
  <dt><a href="#">秋秋淘衣坊</a></dt>
  <dd>
    <ul>
      <li><a href="http://qiuqiuyifang.taobao.com" >秋秋</a></li>
      <li><a >酒吧\夜店论坛</a></li>
      <li><a >福州电影院</a></li>
    </ul>
  </dd>
  <dt><a href="#">秋秋淘衣坊2</a></dt>
  <dd>
    <ul>
      <li><a >房屋出租</a></li>
      <li><a >招聘求职</a></li>
      <li><a >福州拼车</a></li>
      <li><a >二手交易市场</a></li>
    </ul>
  </dd>
  <dt><a href="#">秋秋淘衣坊3</a></dt>
  <dd>
    <ul>
      <li><a >福清论坛</a></li>
      <li><a >长乐论坛</a></li>
      <li><a >平潭论坛</a></li>
    </ul>
  </dd>
</dl>

css代码：

body {
    font-family: Arial;
    font-size: 16px;
}
dl {
    width: 300px;
}
dl, dd {
    margin: 0;
    padding:0;
}
dd {
    border:1px solid #ae8758;
}
dt {
    background-color:#ae8758;
    font-size: 18px;
    padding: 5px 5px 5px 20px;
    margin:2px 0 0;
    height:29px;
    line-height:28px;
}
dt a {
    color: #FFF;
    text-decoration:none;
    display:block;
}
dd a {
    color: #000;
}
ul {
    list-style: none;
    padding:5px 5px 5px 20px;
    margin:0;
}
li {
    line-height:24px;
}
.bg {
    background-position:5px -16px;
}

jQuery代码：

$(document).ready(function(){
	$("dd").hide();
	$("dt a").click(function(){
		 $(this).parent().next()
		 .slideToggle().siblings("dd").slideUp();;
		 })
	})

预览效果：