【侧边栏-手风琴效果-js实现】Js实现侧边栏-手风琴效果-带选择小箭头

曾经终败给现在 2022-12-15 08:35 245阅读 0赞

# 【Js实现侧边栏-手风琴效果-带选择小箭头】 #

### 效果展示： ###

![20201015205231485.png][]![20201015205253749.png][]![20201015205231485.png][]

### 动作效果描述： ###

第一次，点击 二级标题，小箭头 ----顺时针旋转----90度，风琴列表弹出；

第二次，点击二级标题，小箭头 ----逆时针旋转----90度，风琴列表收起；

## CSS样式代码： ##

/**基础样式**/
            body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th {
                margin: 0;
                padding: 0;
                border: 0px;
            }
            ul,ol,li{list-style:none; float:left;}
            a:link,a:visited,a:hover,a:active{text-decoration:none; cursor:pointer;}
            body{width: 1200px;margin: 0 auto;}
            .fl{float:left;}
            /*基础样式end*/
    
            /*列表样式*/
            .ny-left{width:230px;background:url(../images/left.jpg) no-repeat;min-height:500px;}
            .lmcc{width:198px; padding-left:32px; color:#fff; font-size:16px; background:#092b6e; height:50px; line-height:50px;}
            .ejdh li a{width:180px; height:43px; line-height:43px; background:#e4e4e4 no-repeat 32px center; color:#092b6e; font-size:14px; display:block; float:left; padding-left:50px; border-bottom:1px solid #edf0f5;}
            .ejdh li a:hover,.left-current{background:#61759d no-repeat 32px center!important; color:#fff!important;}
    
    
            /*手风琴动画样式*/
            .submenu {
                content: " ";
            }
            .submenu li {
                width: 221px;
                margin-left: 6px;
                border-left: solid 3px #284c95;
                transition: border-left 220ms ease-in;
            }
            .submenu li a{
                width: 171px;
            }
            /*下拉箭头样式*/
            .xljt {
                display: inline-block;
                width: 44px;
                height: 44px;
                line-height: 44px;
                float: right;
                transition: transform 0.4s linear;
            }

## html标签代码： ##

## Js代码： ##

# 完整代码： #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /**基础样式**/
            body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th {
                margin: 0;
                padding: 0;
                border: 0px;
            }
            ul,ol,li{list-style:none; float:left;}
            a:link,a:visited,a:hover,a:active{text-decoration:none; cursor:pointer;}
            body{width: 1200px;margin: 0 auto;}
            .fl{float:left;}
            /*基础样式end*/
    
            /*列表样式*/
            .ny-left{width:230px;background:url(../images/left.jpg) no-repeat;min-height:500px;}
            .lmcc{width:198px; padding-left:32px; color:#fff; font-size:16px; background:#092b6e; height:50px; line-height:50px;}
            .ejdh li a{width:180px; height:43px; line-height:43px; background:#e4e4e4 no-repeat 32px center; color:#092b6e; font-size:14px; display:block; float:left; padding-left:50px; border-bottom:1px solid #edf0f5;}
            .ejdh li a:hover,.left-current{background:#61759d no-repeat 32px center!important; color:#fff!important;}
    
    
            /*手风琴动画样式*/
            .submenu {
                content: " ";
            }
            .submenu li {
                width: 221px;
                margin-left: 6px;
                border-left: solid 3px #284c95;
                transition: border-left 220ms ease-in;
            }
            .submenu li a{
                width: 171px;
            }
            /*下拉箭头样式*/
            .xljt {
                display: inline-block;
                width: 44px;
                height: 44px;
                line-height: 44px;
                float: right;
                transition: transform 0.4s linear;
            }
        </style>
        <script src="../js/jquery.min.js"></script>
        <script>
            $(document).ready( function() {
                var $submenu = $('.submenu');
                var $mainmenu = $('.container');
                var $xljt = $(".xljt");
                $submenu.hide();
                //$submenu.first().delay(400).slideDown(700);
                $submenu.on('click','li', function() {
                    $submenu.siblings().find('li').removeClass('chosen');
                    $(this).addClass('chosen');
                });
                $mainmenu.on('click', 'li', function() {
                    $(this).next('.submenu').slideToggle().siblings('.submenu').slideUp();
                });
                //下拉箭头旋转代码
                $(".xlmenu").on("click",function(){
                    if($(this).children().children()[0].style.transform==="rotate(90deg)") {
                        $(this).children().children().css({transform: "rotate("+0+"deg)"});
                    }
                    else if($(this).children().children()[0].style.transform==="rotate(0deg)"){
                        $(this).children().children().css({transform:"rotate("+90+"deg)"});
    
                    };
                });
            });
        </script>
    </head>
    <body>
    <h2 style="text-align: center;margin: 5px;">手风琴效果</h2>
    <div class="ny-left fl">
        <div class="lmcc fl">培养管理</div>
        <div class="ejdh fl">
            <ul class="container">
                <li>
                    <li class="xlmenu">
                        <a>培养方案<img class="xljt" src="../images/xljtl.png" style="transform: rotate(0deg);"></a>
                    </li>
                    <ul class="submenu">
                        <li><a href="#">博士</a></li>
                        <li><a href="#">硕士</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    </body>
    </html>

### 图片资源：left.jpg 侧边栏背景图，xljtl.png 下拉箭头icon ###

![20201015210220173.jpg][]

![20201015210239167.png][]

[20201015205231485.png]: /images/20221123/ce6a5776ceb94deca6d008ae7107ecbb.png
[20201015205253749.png]: https://img-blog.csdnimg.cn/20201015205253749.png
[20201015210220173.jpg]: /images/20221123/5505aaad191e4a468f7be2dd47322efa.png
[20201015210239167.png]: /images/20221123/1cb30332b4904b0b963e50e3d49a3a96.png