jQuery实现层叠菜单功能，font-awesome图标样式完成箭头展示

最新推荐文章于 2021-06-18 02:46:12 发布

嘘 -你听

最新推荐文章于 2021-06-18 02:46:12 发布

阅读量478

点赞数

本文链接：https://blog.csdn.net/weixin_44657829/article/details/106044168

版权

java 同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

jquery

6 篇文章 0 订阅

订阅专栏

jQuery实现层叠菜单功能；font-awesome图标样式完成箭头展示

还有个比较方便的插件zTree，后续整理总结。

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/font-awesome.min.css">
    <script src="js/jquery-3.5.0.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .menus {
            margin: 20px 0 0 50px;
        }
        .menus .sub-menu {
            margin-left: 25px;
        }
    </style>
</head>
<body>
    <div class="menus">
        <ul>
            <li>
                <a class="menu-title" href="#">公司管理</a><i class="fa fa-arrow-down"></i>
                <ul class="sub-menu">
                    <li><a>会议室管理</a></li>
                    <li><a>资产管理</a></li>
<!--                </ul>-->
            </li>
            <li>
                <a class="menu-title" href="#">系统管理</a><i class="fa fa-arrow-down"></i>
                <ul class="sub-menu">
                    <li><a>权限管理</a></li>
                    <li><a>菜单管理</a></li>
                    <li><a>用户管理</a></li>
                </ul>
            </li>
            <li>
                <a class="menu-title" href="#">部门管理</a><i class="fa fa-arrow-down"></i>
                <ul class="sub-menu">
                    <li><a>部门经费</a></li>
                    <li><a>部门资产</a></li>
                    <li><a>部门员工</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<script>
    // 给所有顶级菜单加上点击事件
    $('.menus .menu-title').click(function() {
        // 这个是获取顶级菜单的子菜单
        var subMenu = $(this).siblings('ul');
        // 这是获取到小图标
        var icon = $(this).next();

        //  subMenu.css('display');  去样式中display值
        // console.log(subMenu.css('display'))
        if('none' == subMenu.css('display')) {  // display值为none表示隐藏，就要显示
            // 当显示的时候，应该是向下的箭头，所以要将向左的箭头移除掉
            icon.removeClass('fa-arrow-left');  // removeClass是移除样式
            // 添加向下的箭头
            icon.addClass('fa-arrow-down'); // addClass是添加样式
            subMenu.show();
        }else { // else表示display值为block, 就要隐藏
            // 当影藏的时候，应该是向左的箭头，所以要将向下的箭头移除掉
            icon.removeClass('fa-arrow-down');
            // 添加向左的箭头
            icon.addClass('fa-arrow-left');
            subMenu.hide();
        }
        return false;  //阻止a标签的默认行为
    })
</script>
</html>

嘘 -你听

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现层叠菜单功能，font-awesome图标样式完成箭头展示

jQuery实现层叠菜单功能；font-awesome图标样式完成箭头展示还有个比较方便的插件zTree，后续整理总结。效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/font-awesome.m
复制链接

扫一扫

专栏目录