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