jQuery 侧边栏展开收起效果

 

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>