jQuery文件：

<script type="text/javascript">

    $(function(){

        

        var tit= $(".boxBar dl dt");

        var con= $(".boxBar dl dd");

        var list=$("dt:gt(4)");

        var conBox=$("dd:gt(4)");

        list.hide();    

        

        $(".btn").click(function(){            

            if(list.is(":visible")){

                conBox.hide();

                list.hide();

                $(".btn").text("展开");

                }else{

                    list.show();

                    conBox.hide();

                    $(".btn").text("收起");

                    }

            

            })

        tit.click(function(){

            $(this).siblings("dd").hide();

            $(this).next("dd").show();

        });

 

html：

<div class="boxBar">

    <dl>

        <dt>1111</dt>

        <dd style="display:block;">sdfsdfsdfsd</dd>

        <dt>1111</dt>

        <dd>sdfsdfsdfsd</dd>

        <dt>1111</dt>

        <dd>sdfsdfsdfsd</dd>

        <dt>1111</dt>

        <dd>sdfsdfsdfsd</dd>

        <dt>1111</dt>

        <dd>sdfsdfsdfsd</dd>

        <dt>1111</dt>

        <dd>sdfsdfsdfsd</dd>

        <dt>1111</dt>

        <dd>sdfsdfsdfsd</dd>

        <dt>1111</dt>

        <dd>sdfsdfsdfsd</dd>

        <dt>1111</dt>

        <dd>sdfsdfsdfsd</dd>

        <dt>1111</dt>

        <dd>sdfsdfsdfsd</dd>

    </dl>

    <div class="btn">展开全部</div>

</div>

 

 

CSS：

 

<style type="text/css">

    * { margin:0; padding:0;}

    .boxBar { width:120px; height:100%; margin:0 auto; margin-top:20px;}

    .boxBar dl dt { width:110px; height:25px; line-height:25px; padding:0 5px; border:1px solid #ccc;margin-top:-1px; cursor:pointer;}

    .boxBar dl dd { width:110px; height:auto; padding:5px; border:1px solid #ccc; margin-top:-1px; overflow:hidden; text-align:center; display:none;}

    .btn { width:110px; height:25px; line-height:25px; padding:0 5px; border:1px solid #ccc;margin-top:-1px; text-align:center; cursor:pointer;}

</style>