我写的一个手风琴效果

先看demo

body, dl, dd, ul, li { margin: 0; padding: 0 }

dl { width: 500px; margin: 0 auto; overflow: hidden }

dt { border-radius: 10px; background: gray; color: #FFF; padding: 10px; margin: 2px 0; cursor: default; transition: background 1s }

dd { border-radius: 10px; padding: 0 20px; background: #eee; height: 0; overflow: hidden; }

dt:hover { background: #bbb }

dd.first { height: auto }

ul { list-style: none }

<dl id="test1">

  <dt>导航1</dt>

  <dd class="first">

    <ul>

      <li>111111</li>

      <li>111111</li>

      <li>111111</li>

    </ul>

  </dd>

  <dt>导航2</dt>

  <dd>

    <ul>

      <li>222222</li>

      <li>222222</li>

      <li>222222</li>

    </ul>

  </dd>

  <dt>导航3</dt>

  <dd>

    <ul>

      <li>3333333</li>

      <li>3333333</li>

      <li>3333333</li>

    </ul>

  </dd>

  <dt>导航4</dt>

  <dd>

    <ul>

      <li>4444444</li>

      <li>4444444</li>

      <li>4444444</li>

    </ul>

  </dd>

  <dt>导航5</dt>

  <dd>

    <ul>

      <li>5555555</li>

      <li>5555555</li>

      <li>5555555</li>

    </ul>

  </dd>

  <dt>导航6</dt>

  <dd>

    <ul>

      <li>6666666</li>

      <li>6666666</li>

      <li>6666666</li>

    </ul>

  </dd>

</dl>

(function($){

    $.fn.sfq=function(options){

        var defaults={

            width:500

            },

        options=$.extend(defaults,options);

        var $sfq=$(this);

            $sfq.width(options.width);

        var dt=$sfq.children("dt");

        var dd=$sfq.children("dd");

        dt.hover(function(){

            var index=dt.index(this);

            this.timer=setTimeout(function(){

                var dHeight=dt.eq(index).next().find("ul").height();

                dt.eq(index).next().animate({"height":dHeight},500)

                  .siblings("dd").animate({"height":"0px"},500);

            },300);

        },function(){

            clearTimeout(this.timer)

        })

    }

})(jQuery)



$(function(){

    $("#test1").sfq({"width":"300"})

})

 需要方法连缀的话就在闭包中给个返回值 return this