lay-shrink="all"

layui 2.2.6版本引入了lay-shrink=all属性,用于在展开子菜单时自动收缩兄弟节点已展开的子菜单,增强导航栏的交互体验。通过简单的HTML与JS代码示例,展示了如何应用这一新特性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

layui 官方文档 在 2.2.6 版本里面 已经 增加了  lay-shrink="all" ,用于开启:展开子菜单时,收缩兄弟节点已展开的子菜单。

见下图, 官网说明:https://www.layui.com/doc/base/changelog.html

 

html 页面 使用 :

  <ul class="layui-nav layui-nav-tree" lay-shrink="all">

  </ul>

实现方式二 :

html 页面 :

 <ul class="layui-nav layui-nav-tree" lay-shrink="all">
      <li class="layui-nav-item layui-nav-itemed">

        ...
      </li>
</ul>

js:

 $('.layui-nav-item').click(function(){
        $(this).siblings('li').attr('class','layui-nav-item');
  })

 

 

@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="~/css/site.css" /> <link href="~/js/layui-v2.5.5/layui/css/layui.css" rel="stylesheet" /> <style> /* 浅灰蓝配色方案 */ body { background-color: #e6f7ff; /* 浅灰蓝背景 */ color: #333; /* 深灰色文字 */ } #LAY_app, body, html { height: 100%; } #LAY-user-login, .layadmin-user-display-show { display: block !important; } .layadmin-user-login { position: relative; left: 0; top: 0; padding: 110px 0; min-height: 100%; box-sizing: border-box; } .layadmin-user-login-main { width: 375px; margin: 0 auto; box-sizing: border-box; background-color: #f8f9fc; /* 浅灰白背景 */ border-radius: 8px; box-shadow: 0 0 15px rgba(154, 173, 190, 0.2); /* 浅灰蓝阴影 */ border: 1px solid #d3dce6; /* 浅灰蓝边框 */ } .layadmin-user-login-header { text-align: center; padding-top: 20px; } .layadmin-user-login-box { padding: 20px; } .layadmin-user-login-header h2 { margin-bottom: 10px; font-weight: bold; font-size: 30px; color: #5a8dbe; /* 深灰蓝色标题 */ text-shadow: 1px 1px 2px rgba(0,0,0,0.05); } .layadmin-user-login-header p { font-weight: 300; color: #6888a1; /* 灰蓝色 */ } .layadmin-user-login-icon { position: absolute; left: 1px; top: 1px; width: 38px; line-height: 36px; text-align: center; color: #9aadbe; /* 浅灰蓝图标 */ } .layadmin-user-login-body .layui-form-item .layui-input { padding-left: 38px; border: 1px solid #d3dce6; /* 浅灰蓝边框 */ } .layadmin-user-login-body .layui-form-item { position: relative; margin-bottom: 25px; } .layadmin-user-login-footer { position: absolute; left: 0; bottom: 0; width: 100%; line-height: 30px; padding: 20px; text-align: center; box-sizing: border-box; color: #6888a1; /* 灰蓝色 */ } /* 登录按钮样式 */ .layui-btn { background-color: #5a8dbe; /* 深灰蓝色按钮 */ transition: all 0.3s; } .layui-btn:hover { background-color: #4a7bac; /* 深灰蓝悬停 */ transform: translateY(-2px); box-shadow: 0 4px 8px rgba(90, 141, 190, 0.3); } /* 单选框样式 */ .layui-form-radio > i { color: #5a8dbe; /* 深灰蓝色选中状态 */ } .layui-form-radio:hover i { color: #9aadbe; /* 浅灰蓝悬停 */ } /* 输入框聚焦效果 */ .layui-input:focus { border-color: #5a8dbe !important; box-shadow: 0 0 8px rgba(90, 141, 190, 0.3); } </style> </head> <body layadmin-themealias="default"> <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login"> <div class="layadmin-user-login-main"> <div class="layadmin-user-login-box layadmin-user-login-header"> <h2>学生信息管理系统</h2> </div> <div class="layadmin-user-login-box layadmin-user-login-body layui-form"> <div class="layui-form-item"> <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label> <input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="用户名" class="layui-input"> </div> <div class="layui-form-item"> <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label> <input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input"> </div> <div class="layui-form-item" style="margin-bottom: 20px; text-align: center; "> <input type="radio" name="role" value="0" title="管理员" checked> <input type="radio" name="role" value="1" title="教师"> <input type="radio" name="role" value="2" title="学生"> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="LAY-user-login-submit">登录</button> </div> </div> </div> <div class="layui-trans layadmin-user-login-footer"> <p></p> </div> </div> <script src="~/js/layui-v2.5.5/layui/layui.js"></script> <script> layui.use(['layer', 'form', 'element'], function () { var $ = layui.$ , layer = layui.layer , form = layui.form , element = layui.element; form.render(); form.on("radio", function (data) { console.log(data); }); //提交 form.on('submit(LAY-user-login-submit)', function (obj) { $.ajax({ url: "/Home/CheckLogin", type: 'post', data: obj.field, beforeSend: function () { this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] }); }, success: function (data) { if (data.status == 'error') { layer.msg(data.msg, { icon: 5 });//失败的表情 return; } else { layer.msg(data.msg, { icon: 6,//成功的表情 time: 1 //1秒关闭(如果不配置,默认是3秒) }, function () { localStorage.setItem("token", data.token); location.href = '/Home/Index'; //后台主页 }); } }, complete: function () { layer.close(this.layerIndex); } }); }); }); </script> <style id="LAY_layadmin_theme"> .layui-side-menu, .layadmin-pagetabs .layui-tab-title li:after, .layadmin-pagetabs .layui-tab-title li.layui-this:after, .layui-layer-admin .layui-layer-title, .layadmin-side-shrink .layui-side-menu .layui-nav > .layui-nav-item > .layui-nav-child { background-color: #5a8dbe !important; /* 深灰蓝 */ } .layui-nav-tree .layui-this, .layui-nav-tree .layui-this > a, .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a { background-color: #e6f7ff !important; /* 浅灰蓝背景 */ color: #4a7bac !important; /* 深灰蓝文字 */ } .layui-layout-admin .layui-logo { background-color: #5a8dbe !important; /* 深灰蓝 */ color: #f8f9fc; /* 浅灰白文字 */ } </style> <div class="layui-layer-move"></div> </body> </html>根据代码画出NS图PAD图
06-10
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值