Layui实现左侧导航栏菜单可自由折叠

最新推荐文章于 2024-07-22 01:43:34 发布

程序yang

最新推荐文章于 2024-07-22 01:43:34 发布

阅读量4.3k

点赞数

分类专栏：其他文章

本文链接：https://blog.csdn.net/weixin_44563573/article/details/115005369

版权

其他文章专栏收录该内容

4 篇文章 118 订阅

订阅专栏

本文介绍了如何使用Layui实现左侧导航栏菜单的自由折叠功能。通过提供的代码示例，包括Html和foldmenu.js，展示了将折叠效果封装到js文件中，使用时只需引入并依赖jquery.js。文章最后提供了源码下载链接及提取码。

摘要由CSDN通过智能技术生成

先看Layui官方的后台管理界面，用过的朋友可以知道，左侧的导航栏都是固定的，并不能折叠起来。

在这里插入图片描述

那么我们要怎么实现它可以自由折叠呢？请往下看。

实现的效果图：

在这里插入图片描述

请看相关代码：

Html代码：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>后台管理系统页面</title>
    <link rel="stylesheet" th:href="@{css/layui.css}">
    <link rel="stylesheet" th:href="@{layui/css/layui.css}">
</head>
<style>

</style>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header custom-header">
        <div class="layui-logo">后台管理系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item slide-sidebar" lay-unselect>
                <a href="javascript:;" class="icon-font"><i class="ai ai-menufold"></i></a>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">                   
                    初始化管理员
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">修改密码</a></dd>
                    <dd><a href="JavaScript:void(0)" id="logout">退出</a></dd>
                </dl>
            </li>       
        </ul>
    </div>

    <div class="layui-side layui-bg-black" id="menudata">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">

            </ul>
        </div>
        <div title="菜单折叠" class="kit-side-fold" style="position: fixed;margin-left:200px;top: 50%;">
            <i class="layui-icon" style="color: #2c2e2f;font-size: 15px;">&#xe635;</i>
        </div>
    </div>

    <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
        <ul class="layui-tab-title">
        </ul>
        <ul class="rightmenu" style="display: none;position: absolute;">
            <li data-type="closethis">关闭当前</li>
            <li data-type="closeall">关闭所有</li>
        </ul>
        <div class="layui-tab-content">
        </div>
    </div>
    <!--    <div class="layui-footer">-->
    <!--        &lt;!&ndash; 底部固定区域 &ndash;&gt;-->
    <!--        底部固定区域-->
    <!--    </div>-->
</div>
<script type="text/javascript" th:src="@{js/jquery-3.3.1.min.js}"></script>
<script type="text/javascript" th:src="@{layui/layui.js}"></script>
<script type="text/javascript" th:src="@{layui/layui.all.js}"></script>
<script type="text/javascript" th:src="@{js/foldmenu.js}"></script>
<script type="text/javascript" th:src="@{js/contentspage.js}"></script>

<script>    

//JavaScript代码区域
layui.use('element', function () {
    var element = layui.element;
    var layer = layui.layer;
});


var tempArr = "";
var son_permission = "";


//页面加载事件
window.onload = function () {
    getMenuData();   
    getJurisdiction();
};

//获取菜单权限
function getJurisdiction() {
    //获取用户对应的权限
    $.post("/MenudataController/findMenudataByJurisdiction", function (result) {       
        var str = result[0].permission;//01011,01021
        tempArr = str.split(",");//分割 01011 01021        
    });
}


//获取导航栏菜单
function getMenuData() {
    $.ajax({
        type: "GET",
        url: "/LoginController/findMenuData",
        cache: false,
        success: function (data) {
            //将layui在页面加载时渲染出来的span.layui-nav-bar利用DOM先删除掉再重新渲染
            $('#nav').find('span.layui-nav-bar').remove();

            //遍历
            $.each(data, function (i) {
                var menu = '<li class="layui-nav-item h-menu">' + '<a href="javascript:;">' + data[i].title + '</a>';
                if (data[i].menudataList) {
                    var menus = '';
                    $.each(data[i].menudataList, function (j) {
                        for (var a = 0; a < tempArr.length; a++) {
                            son_permission = tempArr[a].substring(0, 4);//截取前4位 οnclick="going(this)"
                            if (son_permission == data[i].menudataList[j].funcid) {                               
                                menus = menus + '<dl class="layui-nav-child">' + '<dd><a href="javascript:;" οnclick="showPage()" data-url="' + data[i].menudataList[j].url + '"  data-title="' + data[i].menudataList[j].title + '" data-id="' + data[i].menudataList[j].id + '" class="site-demo-active" data-type="tabAdd">' + data[i].menudataList[j].title + '</a></dd>' + '</dl>';
                            }
                        }
                    })
                    menu = menu + menus;
                }
                menu = menu + '</li>';
                //有二级菜单才显示出来
                if (menus != "") {
                    $("#menudata ul").append(menu);
                }

            });
            xuanran();//重新渲染
        }
    });
}

//重新渲染
function xuanran() {
    layui.use('element', function () {
        var element = layui.element;
        var layFilter = $("#nav").attr('lay-filter');
        element.render('nav', layFilter);
    })
}


//退出登录
layui.use('layer', function () {
    $("#logout").click(function () {
        layer.confirm("确定要注销登录吗？注销后密码将不再记住！", {
            icon: 3,
            title: '提示',
            btn: ['确定', '取消'],
            offset: '150px'
        }, function (index) {
            layer.close(index);
            window.location.href = "/LoginController/loginOut";
        });
    });
});


</script>
</body>
</html>

注意：

本人的导航栏是通过查询配置文件绑定的，不是在页面写死的，所以你在html上面找不到我的导航栏信息，但是这不影响实现效果。

在这里插入图片描述

生成的代码，我已经将它封装成一个js文件了，要用是时候，在页面引入即可，如下：

foldmenu.js

/**
 * @author 程序羊
 * 2021年3月18日17:22:11
 */
//JavaScript代码区域
layui.use('element', function () {
    var element = layui.element;
});

var isShow = true; //定义一个标志位
$('.kit-side-fold').click(function () {
    // 选择出所有的span，并判断是不是hidden
    $('.h-menu span').each(function () {
        if ($(this).is(':hidden')) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
    //判断isshow的状态
    if (isShow) {
        $('.layui-side.layui-bg-black').width(0);
        //设置宽度
        $('.kit-side-fold i').css('margin-left', '-200px');
        $('.layui-tab').css('margin-left', '0px');//设置右边嵌套内容宽度
        //修改图标的位置 //将footer和body的宽度修改
        $('.layui-body').css('left', 0 + 'px');
        $('.layui-footer').css('left', 0 + 'px');
        //将二级导航栏隐藏
        $('dd span').each(function () {
            $(this).hide();
        });
        //修改标志位
        isShow = false;
    } else {
        $('.layui-side.layui-bg-black').width(200);
        $('.kit-side-fold i').css('margin-left', '0px');
        $('.layui-tab').css('margin-left', '200px');//设置右边嵌套内容宽度
        $('.layui-body').css('left', 200 + 'px');
        $('.layui-footer').css('left', 200 + 'px');
        $('dd span').each(function () {
            $(this).show();
        });
        isShow = true;
    }
});