jquery实现侧边栏手风琴三级导航菜单demo

jquery实现侧边栏手风琴三级导航菜单

效果图:

引入文件，font-awesome为字体库文件：

    <link rel="stylesheet" type="text/css" href="Font-Awesome-3.2.1/css/font-awesome.min.css">
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>

css代码：

    ul {
    	list-style: none;
    }
    .s-side {
        position: fixed;
        top: 0;
        left: 0;
        width: 230px;
        bottom: 0;
        overflow: auto;
        font-size: 16px;
        background-color: #7d7472;
        color: #fff;
    }
    .s-side > ul {
    	margin-top: 0;
    	padding-left: 0;
    }
    .s-side > ul > li {
        line-height: 40px;
        width: 100%;
        border: 1px solid;
    }
    .s-side > ul > li > a > i,
    .s-side > ul > li > div > i {
        display: inline-block;
        width: 40px;
        text-align: center;
    }
    i.icon-chevron-up {
        float: right;
    }
    .iconRotate {
        transform: rotate(180deg);
        transition: transform .5s;
    }
    .s-firstNav > i.icon-chevron-up {
        margin-right: 5px;
        margin-top: 10px;
    }    
    .s-firstDrop {
        background-color: #07a3c3;

    }
    .s-firstDrop > li {
        line-height: 33px;
            border: 1px solid;
    }
    .s-firstDrop,
    .s-secondDrop {
        display: none;
    }        
    .s-secondNav > i.icon-chevron-up {
        margin-right: 18px;
        margin-top: 12px;
    }    
    .s-secondDrop {
        padding-left: 20px;
        background-color: #decece;
    }

html代码：

    <div class="s-side">
        <ul>
            <li class="s-firstItem">
                <a href="">
                    <i class="icon-home"></i>
                    <span>一级导航</span>
                </a>
            </li>
            <li>
                <div class="d-firstNav s-firstNav">
                    <i class="icon-tasks"></i>
                    <span>一级菜单</span>
                    <i class="icon-chevron-up"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="icon-circle"></i>
                            <span>二级菜单</span>
                            <i class="icon-chevron-up"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="">三级导航</a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="">三级导航</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="icon-circle"></i>
                            <span>二级菜单</span>
                            <i class="icon-chevron-up"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="">三级导航</a>
                            </li>
                        </ul>
                    </li>
                    <li class="s-secondItem">
                        <a href="">
                            <i class="icon-circle"></i>
                            <span>二级导航</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <div class="d-firstNav s-firstNav">
                    <i class="icon-bar-chart"></i>
                    <span>一级菜单</span>
                    <i class="icon-chevron-up"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="icon-circle"></i>
                        <a href="">二级导航</a>
                    </li>
                    <li class="s-secondItem">
                        <i class="icon-circle"></i>
                        <a href="">二级导航</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

js代码：

    $(function() {
        $('.d-firstNav').click(function() {
            dropSwift($(this), '.d-firstDrop');
        });
        $('.d-secondNav').click(function() {
            dropSwift($(this), '.d-secondDrop');
        });
        /**
         * @param dom   點擊的當前元素
         * @param drop  處理的下拉菜單
         */
        function dropSwift(dom, drop) {
            dom.next().slideToggle();
            dom.parent().siblings().find('.icon-chevron-up').removeClass('iconRotate');
            dom.parent().siblings().find(drop).slideUp();
            var iconChevron = dom.find('.icon-chevron-up');
            if (iconChevron.hasClass('iconRotate')) {
                iconChevron.removeClass('iconRotate');
            } else {
                iconChevron.addClass('iconRotate');
            }
        }
    })

demo地址：https://github.com/RidingACodeToStray/jQuery-three-level-accordion-slidebar