使用 jQuery 实现手风琴效果

accdion.html

<div class="nav">
    <ul>
        <li class="nav-item">
            <a href="javascript:;"><i class="my-icon nav-icon icon_1"></i><span>网站配置</span><i class="my-icon nav-more"></i></a>
            <ul style="display: none;">
                <li><a href="javascript:;"><span>网站设置</span></a></li>
                <li><a href="javascript:;"><span>友情链接</span></a></li>
                <li><a href="javascript:;"><span>分类管理</span></a></li>
                <li><a href="javascript:;"><span>系统日志</span></a></li>
            </ul>
        </li>
        <li class="nav-item">
            <a href="javascript:;"><i class="my-icon nav-icon icon_2"></i><span>文章管理</span><i class="my-icon nav-more"></i></a>
            <ul style="">
                <li><a href="javascript:;"><span>站内新闻</span></a></li>
                <li><a href="javascript:;"><span>站内公告</span></a></li>
                <li><a href="javascript:;"><span>登录日志</span></a></li>
            </ul>
        </li>
        <li class="nav-item">
            <a href="javascript:;"><i class="my-icon nav-icon icon_3"></i><span>订单管理</span><i class="my-icon nav-more"></i></a>
            <ul style="">
                <li><a href="javascript:;"><span>订单列表</span></a></li>
                <li><a href="javascript:;"><span>打个酱油</span></a></li>
                <li><a href="javascript:;"><span>也打酱油</span></a></li>
            </ul>
        </li>
    </ul>
</div>

accdion.js

$('.nav-item > a').on('click', function () {
    var show = $(this).next().css('display') == "none";
    if (show) {
        // 收起其它
        $('.nav-item').children('ul').slideUp(300);
        // 展开点击的组
        $(this).next('ul').slideDown(300);
    } else {
        //收缩已展开
        $(this).next('ul').slideUp(300);
    }
});