jQuery多级手风琴下拉菜单代码

使用方法：

引入jQuery库文件

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

CSS样式

.list{width: 210px;border-bottom:solid 1px #316a91;margin:40px auto 0 auto;}
.list ul li{background-color:#467ca2; border:solid 1px #316a91; border-bottom:0;}
.list ul li a{padding-left: 10px;color: #fff; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative;}
.list ul li .inactive{ background:url(images/off.png) no-repeat 184px center;}
.list ul li .inactives{background:url(images/on.png) no-repeat 184px center;} 
.list ul li ul{display: none;}
.list ul li ul li { border-left:0; border-right:0; background-color:#6196bb; border-color:#467ca2;}
.list ul li ul li ul{display: none;}
.list ul li ul li a{ padding-left:20px;}
.list ul li ul li ul li { background-color:#d6e6f1; border-color:#6196bb; }
.last{ background-color:#d6e6f1; border-color:#6196bb; }
.list ul li ul li ul li a{ color:#316a91; padding-left:30px;}

JS插件、设置初始化

$(document).ready(function() {
    $('.inactive').click(function(e){
        e.preventDefault();
        if($(this).siblings('ul').css('display')=='none'){
            $(this).parent('li').siblings('li').removeClass('inactives');
            $(this).addClass('inactives');
            $(this).siblings('ul').slideDown(100).children('li');
            if($(this).parents('li').siblings('li').children('ul').css('display')=='block'){
                $(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');
                $(this).parents('li').siblings('li').children('ul').slideUp(100);
            }
        }else{
            //控制自身变成+号
            $(this).removeClass('inactives');
            //控制自身菜单下子菜单隐藏
            $(this).siblings('ul').slideUp(100);
            //控制自身子菜单变成+号
            $(this).siblings('ul').children('li').children('ul').parent('li').children('a').addClass('inactives');
            //控制自身菜单下子菜单隐藏
            $(this).siblings('ul').children('li').children('ul').slideUp(100);
            //控制同级菜单只保持一个是展开的（-号显示）
            $(this).siblings('ul').children('li').children('a').removeClass('inactives');
        }
    })
});

HTML结构

<div class="list">
    <ul class="yiji">
        <li><a href="#">中国美协章程</a></li>
        <li><a href="#" class="inactive">团体会员</a>
            <ul style="display: none">
                <li><a href="#" class="inactive active">美协机关</a>
                    <ul>
                        <li><a href="#">办公室</a></li>
                        <li><a href="#">人事处</a></li>
                        <li><a href="#">组联部</a></li>
                        <li><a href="#">外联部</a></li>
                        <li><a href="#">研究部</a></li>
                        <li><a href="#">维权办</a></li>
                    </ul>
                </li> 
                <li class="last"><a href="#">《美术》杂志社</a></li> 
            </ul>
        </li>
        <li><a href="#" class="inactive">组织机构</a>
            <ul style="display: none">
                <li><a href="#" class="inactive active">美协机关</a>
                    <ul>
                        <li><a href="#">办公室</a></li>
                        <li><a href="#">人事处</a></li>
                        <li><a href="#">组联部</a></li>
                        <li><a href="#">外联部</a></li>
                        <li><a href="#">研究部</a></li>
                        <li><a href="#">维权办</a></li>
                    </ul>
                </li> 
                <li><a href="#" class="inactive active">中国文联美术艺术中心</a>   
                    <ul>
                        <li><a href="#">综合部</a></li>
                        <li><a href="#">大型活动部</a></li>
                        <li><a href="#">展览部</a></li>
                        <li><a href="#">艺委会工作部</a></li>
                        <li><a href="#">信息资源部</a></li>
                        <li><a href="#">双年展办公室</a></li>
                    </ul>
                </li> 
                <li class="last"><a href="#">《美术》杂志社</a></li> 
            </ul>
        </li>
    </ul>
</div>