菜单追加后,菜单不会出现折叠状态,已解决

最新推荐文章于 2023-09-19 10:33:34 发布
最新推荐文章于 2023-09-19 10:33:34 发布
阅读量448 收藏
点赞数
文章标签： javascript maven java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chen_binbin/article/details/128217069
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人薪资系统</title>
    <style type="text/css">
        body {

            overflow-x: hidden;
            overflow-Y: hidden;
        }

        #bars {
            margin-left: 12.5rem;

        }

        #sup {
            margin-top: -3.8rem;
        }

        .layui-body {
            margin-top: -54rem;
        }
    </style>
</head>
<body>
<!-- 导航条-->
<div id="bars">
    <ul class="layui-nav">
        <li class="layui-nav-item layui-this"><a href="">选中</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">常规</a>
        </li>
        <li class="layui-nav-item"><a href="">导航</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">子级</a>
            <dl class="layui-nav-child">
                <dd><a href="">菜单1</a></dd>
                <dd><a href="">菜单2</a></dd>
                <dd><a href="">菜单3</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">选项</a>
            <dl class="layui-nav-child">
                <dd><a href="">选项1</a></dd>
                <dd class="layui-this"><a href="">选项2</a></dd>
                <dd><a href="">选项3</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">演示</a></li>
        <li style="margin-left:70rem;" class="layui-nav-item" lay-unselect="">
            <a href="javascript:;"><img src="./layui/img/chenbinbin.jpg" class="layui-nav-img"> <span>陈斌斌</span></a>

            <dl class="layui-nav-child">
                <dd><a href="javascript:;">子级菜单</a></dd>
                <dd><a href="javascript:;">横线隔断</a></dd>
                <hr>
                <dd style="text-align: center;"><a href="">退出</a></dd>
            </dl>
        </li>
    </ul>
</div>
<!-- 垂直菜单栏-->
<div id="sup">
    <ul id="content" class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="height: 58.6rem;">
    </ul>
</div>
<div class="layui-body">
</div>
</body>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<script>
    var element, $;
    layui.use(['table', 'element'], function () {
        $ = layui.$;
        element = layui.element;

        //监听提交,请求菜单数值
        $.post("menu/selectAll", {}, function (res) {
        //res是后端返回的树状结构
            //先移除垂直菜单类
            $("#content").find('span.layui-nav-bar').remove();
            var data = res.data;
            for (var i = 0; i < data.length; i++) {
              //  追加父子标签
                $("#content").append(`
                          <li class="layui-nav-item">
                                <a href="javascript:;">${data[i].name}</a>
                                <span class="brother${i + 1}" hidden value="${data[i].muId}">${data[i].muId}</span>

                        </li>
                        `);
                //判断父子下面儿子大于0的,
                if (data[i].children.length > 0) {
                    for (var j = 0; j < data[i].children.length; j++) {
                        //获取类,兄弟向后追加
                        $(".brother" + (i + 1)).after("<dl class='layui-nav-child'> " +
                            "<dd><a href='javascript:;'>"
                            + data[i].children[j].name +
                            "</a>" +
                            "</dd>" +
                            "</dl>"
                        )
                    }
                }
            }
            //重新渲染折叠按钮
            var layFilter = $("#content").attr('lay-filter');
            element.render('content', layFilter);
        }, "json");

    });
</script>
</html>
Chen_binbin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jquery实现点击TreeView文本父节点展开/折叠子节点
12-11
以前一个现在不用的帐号发布的随笔，现在人肉搬过来吧。 注册用户有一段时间了，一直很忙，到现在还没有写一篇，忽然觉的一定要花点时间记录和总结一些东西。好吧，就从这里开始了。今天客户提出要点击菜单（TreeView实现的）的父级节点时，展开节点。心想这个应该是很常见的功能吧，特意google了一下，发现大部分是将的不是js实现的，有些js实现的写的麻烦，干脆自己写一个吧，应该不难的。首先思路是，，让文本点击的时候执行左边‘+’号的事件，查看源码看到，‘+’号的事件是： [removed]TreeView_ToggleNode(ctl00_body__menuTree_Data,0,docume
layui框架学习（6：基础菜单）
gc_2299的博客
02-12 2126
学习并记录layui框架中页面元素的基础菜单相关内容。
layui中左侧导航菜单用append追加没有折叠效果的解决办法
最新发布
qq_63963215的博客
09-19 198
最后给side-menu渲染一下。
layui下拉框始终向下展开
爱米酱的博客
06-04 1621
.layui-form-selectup dl { height: 192px; bottom: auto; }
刷新菜单折叠状态丢失问题
gztrljh
11-03 267
var cur = window.location.href; $('.zan-submenu a').each(function(){ var url = this.href; if(cur.match(url)){ $(this).parents('.haschildren').addClass('open'); $(this).parent().addClass('active'); ...
【推荐】高清jquery视频教程下载
06-17
88:阻止默认行为 89:动画效果 90:slideDown 91:淡入淡出 92:幻灯片插件1 93:幻灯片插件2 94:幻灯片插件3 95:幻灯片插件4 96:时间轴插件 97:图表插件1 98:图表插件2 99:图表插件3 100:图表插件4 101:联动菜单1 102:...
2.0.0 升级日志1
08-04
2.0.0 版本中还修复了一些 bug，例如解决 github 新建的文章保存中提示不准确问题、图像迁移时去重、解决文件树上下文菜单没有正确关闭的问题等。 其他功能 2.0.0 版本中还添加了一些其他功能，例如浮动预览禁用...
2021-2022计算机二级等级考试试题及答案No.4164.docx
11-01
20. 屏幕保护：设定屏幕保护后，在一段时间无操作，屏幕会进入保护状态。 21. 循环队列：循环队列是一种线性数据结构，它的首尾可以重叠，使得队列的操作更加高效。 以上就是这些试题所涵盖的计算机二级等级考试的...
layui侧边收缩菜单
02-02
点击图标收缩或者展开功能案例
可以伸缩的左部菜单，模块化，layer弹框组件
03-07
左部可以伸缩的导航菜单， 右部动态传入的内容，采用layui,自定义layer弹框的样式，对使用layer弹框组件有了新的认识，温故而知新
layui菜单管理（树结构）
01-09
layui菜单页面，用火狐浏览器打开index.html可以查看演示，非常好用的
layui树型可折叠表格.zip
05-26
可以在这里查看下是否需要:https://truedei.blog.csdn.net/article/details/106347226 有详细的介绍. 包括: 1:Layui树型结构和表格相结合的实例 2:自定义表格图表的实例 3:菜单管理的实例 4:多表格的实例 5:搜索的实例 6:等
可折叠的自动伸缩菜单
04-11
这一篇主要讲JS特效代码大全（三）可折叠的自动伸缩菜单。可折叠的自动伸缩菜单适合于最多到二级菜单、菜单数量较多且页面要求比较精致的网站，打开一个菜单的同时另一个菜单就会自动缩回去。
layui 折叠面板无效，数据表格后端有数据返回但是显示“返回的数据不符合规范“的问题解决
weixin_44819874的博客
07-22 943
今天在使用layui的时候，遇到两个小问题，所以记录一下。 layui 折叠面板无效，看看是否是layui.all.js文件引入的位置有误。 在使用layui的数据表格时，有时候返回的有数据，但是页面显示"返回的数据不符合规范，正确的成功状态码应为：“code”: 0"。这时，我们可以在table.render里面加上一段代码parseDate，因为layui数据表格对返回的数据格式有要求。 parseData(res) { return {
2021-08-10 layui折叠面板的使用
ZT1090258642的博客
08-10 6140
官方参考： element模块元素操作文档 - Layui 面板 - 在线演示 - Layui 实现效果 html： //在折叠面板的父容器设置属性 lay-accordion 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板 <div class="layui-collapse" lay-accordion> <div class="layui-colla-item"> <h2 class="layui-...
LayUI 导航菜单异常，无法展开或者无法折叠
liuhagen的专栏
05-05 4886
在自定义的菜单时，左侧的导航栏总是不正常折叠和展开，始终找不到原因。 经过对比正确的发现。 其中有过一个链接的href为空字符串。 将其默认值设置如下值。 a href="javascript:;" 此问题修复。 此问题经过很长一段时间，才被找到，再次做个记录。希望帮助到其他人。 ...
Layui实现左侧导航栏菜单可自由折叠
程序羊的博客
03-19 4299
首先，由于Layui官方的左侧导航栏是固定的，不能自由折叠，为了展示Web项目的全屏操作，程序羊决定利用jQuery实现一个可以点击自由折叠的效果。详细操作请往下看。
如何在PowerPoint中使用vsto中追加鼠标右键菜单
06-06
在 PowerPoint 中使用 VSTO 追加鼠标右键菜单，可以按照以下步骤进行： 1. 在 Visual Studio 中创建一个新的 VSTO 项目。 2. 在解决方案资源管理器中，右键单击项目并选择“添加”->“新项”。 3. 在“添加新项”...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值