JQ实现accordion(可折叠)效果

先看效果--这个就是手风琴的效果；

       

 原理：首先默认section1下面的dd可见，其他的全部隐藏；当点击某个obj时候，

 快速隐藏全部的dd，然后只有obj.NEXT().show（）,

  实现：

         HTML

<dl class="accordion" id="my-accordion">
  <dt>Section 1</dt>
    <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
  <dt>Section 2</dt>
    <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
  <dt>Section 3</dt>
    <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>
  <dt>Section 4</dt>
    <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>
</dl>

css

.accordion {
  width: 500px;
  border: 1px solid #ccc;
  border-bottom: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
.accordion dt,
.accordion dd {
  border-bottom: 1px solid #ccc;
  margin: 0px;
}
.accordion dt {
  background: #eaeaea;
  cursor: pointer;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: bold;
}
.accordion dd {
  padding: 12px 8px;
}

JQ 代码：

 $(function (){
    //在载入的时候除了第一个 通通隐藏；

   //或者 也可以在css中直接设置

    $("dl>dd:gt(0)").addClass("dis");

    $("dl>dt").click(function (){
    $("dl>dd").each(function () {
            this.style.display = "none";
           }

      })
         $(this).next().slideDown('normal');
     })
 })