C# MVC +Layui侧边导航栏的收缩及展开

目录

1、头部代码

2、侧边栏(例子只写了一级导航,需要多级可自行添加)

3、body内容填充

[4、 JS](#4、 JS)


1、头部代码

<div class="layui-layout layui-layout-admin">

<div class="layui-header">

<div class="layui-main">

<div class="layui-logo" style="width:100px">//logo

<i class="layui-icon layui-icon-form"></i><span>管理系统</span>

</div>

<ul class="layui-nav layui-layout-left ">//添加收缩图标按钮

<li class="layui-nav-item layui-show-xs-inline-block " lay-header-event="menuLeft">

<i class="layui-icon layui-icon-spread-left" id="icon"></i>

</li>

</ul>

</div>

</div>

2、侧边栏(例子只写了一级导航,需要多级可自行添加)

<div class="layui-side layui-bg-black">

<div class="layui-side-scroll">

<ul class="layui-nav layui-nav-tree" lay-filter="navSlide">

<li class="layui-nav-item layui-nav-itemed">

<a class='layui-icon layui-icon-home' href="/Home/Index">

<i><span>&nbsp;首页</span></i>

</a>

</li>

<li class="layui-nav-item ">

<a class='layui-icon layui-icon-form' href="/Material/Index">

<i><span>&nbsp;11</span></i>

</a>

</li>

<li class="layui-nav-item ">

<a class='layui-icon layui-icon-add-circle' href="/Home/About">

<i><span>&nbsp;22</span></i>

</a>

</li>

<li class="layui-nav-item ">

<a class='layui-icon layui-icon-reduce-circle' href="/Home/Contact">

<i><span>&nbsp;33</span></i>

</a>

</li>

<li class="layui-nav-item ">

<a class='layui-icon layui-icon-chart-screen' href="/">

<i><span>&nbsp;44</span></i>

</a>

</li>

</ul>

</div>

</div>

3、body内容填充

<div class="layui-body">

<div class="layui-fluid">

@RenderBody()

</div>

</div>

4、 JS

var isShow = true;//是否展开

util.event('lay-header-event', {

menuLeft: function (othis) { // 左侧菜单事件

//选择出所有的span,并判断是不是hidden,用来隐藏icon后面的span里面的内容,而icon不隐藏

$('.layui-nav-item span').each(function () {

if ($(this).is(':hidden')) {

$(this).show();

} else {

$(this).hide();

};

});

$('.layui-header span').each(function () {//同上

if ($(this).is(':hidden')) {

$(this).show();

} else {

$(this).hide();

};

});

//判断isshow的状态

if (isShow) {//收起来

$('.layui-side.layui-bg-black').width(60); //设置宽度

$('.layui-logo').width(30);

$('#icon').removeClass("layui-icon-spread-left"); //移除左图标

$('#icon').addClass("layui-icon-shrink-right"); //添加右图标

//将侧边栏和body的宽度修改

$('.layui-layout-left').css('left', 60 + 'px');

$('.layui-body').css('left', 60 + 'px');

//将二级导航栏隐藏

// $('dd span').each(function () {

// $(this).hide();

// });

//修改标志位

isShow = false;

} else {//展开来

$('.layui-side.layui-bg-black').width(200);

$('.layui-logo').width(100);

$('.layui-layout-left').css('left', 200 + 'px');

$('.layui-body').css('left', 200 + 'px');

/* $('dd span').each(function () {

$(this).show();

});*/

$('#icon').addClass("layui-icon-spread-left"); //修改左图标

$('#icon').removeClass("layui-icon-shrink-right"); //移除右图标

isShow = true;

};

}

相关推荐
abigale0339 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者1 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile1 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络8 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码