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

最新推荐文章于 2022-04-17 11:16:33 发布

Andone_hsx

最新推荐文章于 2022-04-17 11:16:33 发布

阅读量845

点赞数 1

分类专栏：前端小实例文章标签： javascript css html5

本文链接：https://blog.csdn.net/andone_hsx/article/details/109105232

版权

前端小实例专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

效果展示：

动作效果描述：

第一次，点击二级标题，小箭头 ----顺时针旋转----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标签代码：


<body>
<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>

Js代码：

<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>

完整代码：

<!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

Andone_hsx

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【侧边栏-手风琴效果-js实现】Js实现侧边栏-手风琴效果-带选择小箭头

【Js实现侧边栏-手风琴效果-带选择小箭头】效果展示：动作效果描述：第一次，点击二级标题，小箭头 ----顺时针旋转----90度，风琴列表弹出；第二次，点击二级标题，小箭头 ----逆时针旋转----90度，风琴列表收起；CSS样式代码：/**基础样式**/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend,
复制链接

扫一扫