先看问题现象:

使用 layui 的左树功能,先在html页面添加左树功能引入

<ul class="layui-nav layui-nav-tree layui-nav-side">
<li class="layui-nav-item layui-this">
<a id="tree_menu_home" href="#">首页</a>
</li>
</ul>

然后再 js 代码中动态拼接 ul 下的 li 元素,显示出来的效果发现菜单栏无法展开,添加了一个初始化后,显示效果如下图:

element.init();

发现左树菜单栏的样式有点问题,鼠标悬浮1级菜单后样式不正确。

规避方案:

不要在 html 里面添加 ul 的定义,全部在 js 里面动态生成,然后拼接到 dom 元素上后 element.init(); 一下就可以了。

layui 动态左树导航栏显示样式BUG规避的更多相关文章

  1. uni-app动态修改顶部导航栏标题

    动态修改顶部导航栏标题有两种方法方式一.使用自定义到导航栏,覆盖原生导航栏 缺点:自定义到导航栏性能远远不如原生导航栏,手机顶部状态栏区域会被页面内容覆盖,这是因为窗体是沉浸式的原因,即全屏可写内容: ...

  2. phpcmsv9如何实现添加栏目时不在首页内容区显示只在导航栏显示

    之前王晟璟一直使用PHPCMSV9系统建过自己的个人门户网站,同时也建立了一个其他类型的网站,感觉非常不错,我不得不说PHPCMSV9的功能非常齐全,非常强大. 但有一点时常让王晟璟感到很烦脑,那就是 ...

  3. 微信小程序换皮肤,动态切换菜单栏和导航栏的样式,动态修改TabBar和NavigationBar

    在做微信小程序换皮肤的时候,需要动态修改菜单栏(TabBar)和导航栏(NavigationBar) 但是在小程序中它们的样式是写在app.json里面,而且app.json是静态编译,运行时哪怕你修 ...

  4. iOS 要定义自己的导航栏button样式Button Image 执行出彩是不一样的与原来的颜色 -解

    在相机闪光灯,在导航栏中自己定义"闪"样式.点击变换的图像期望,但一直没有变化.原来是该条款的Global Tint颜色.因此,系统会自己主动改变图片的颜色Global Tint颜 ...

  5. Swift - 修改导航栏的样式(文字颜色,背景颜色,背景图片)

    默认情况,导航栏UINavigationController的样式如下,如果想要使用代码修改样式也是比较简单的. 1,修改导航栏背景色 1 2 3 //修改导航栏背景色 self.navigation ...

  6. IOS 设置导航栏全局样式

    // 1.设置导航栏背景 UINavigationBar *bar = [UINavigationBar appearance]; [bar setBackgroundImage:[UIImage r ...

  7. uni-app实现顶部导航栏显示按钮+搜索框

    最近公司准备做app,最终决定使用uni-app框架开发,但是当把设计图给我的时候我心里有点没底,因为他的设计图顶部长成这个样子: 因为这个功能在小程序是根本无法实现的,可能受这个影响,我感觉好像实现 ...

  8. [转]layui点击左侧导航栏,实现不刷新整个页面,只刷新局部

    本文转自:https://blog.csdn.net/s31415926_004/article/details/84256587 其实这篇文章是给自己看的,以后忘记怎么做回来还能看一下哈哈哈哈哈哈哈 ...

  9. mono for android 自定义titleBar Actionbar 顶部导航栏 修改 样式 学习

    以前的我是没有做笔记的习惯的,学习了后觉得自己能记住,但是最近发现很多学的东西都忘记了,所有现在一有新的知识,就记下来吧. 最近又做一个mono for android 的项目 这次调整比较大,上次做 ...

随机推荐

  1. uva1366/LA3530

    简单的矩阵上的dp 从左上角扫到右下角,dp[i][j][0] 代表在i,j处选A ,dp[i][j][1] 代表在i,j处选B. dp[i][j][0]=max(dp[i-1][j][1],dp[i ...

  2. 【Tomcat】tomcat启动后查看运行时JVM参数

    Tomcat优化配置参考http://www.cnblogs.com/qlqwjy/p/8007490.html 1.启动服务后访问localhost,点击Server Status

  3. 2017 CCPC 杭州 HDU6265B 积性函数

    题目链接 http://acm.hdu.edu.cn/downloads/CCPC2018-Hangzhou-ProblemSet.pdf B题 数论题      h(n)=∑ d|n φ(d) × ...

  4. [bzoj1510][POI2006]Kra-The Disks_暴力

    Kra-The Disks bzoj-1510 POI-2006 题目大意:题目链接. 注释:略. 想法:不难发现其实只有前缀最小值是有效的. 进而我们把盘子一个一个往里放,弄一个自底向上的指针往上蹦 ...

  5. POJ1068 Parencodings 解题报告

    Description Let S = s1 s2...s2n be a well-formed string of parentheses. S can be encoded in two diff ...

  6. P1631 序列合并 洛谷

    https://www.luogu.org/problem/show?pid=1631 题目描述 有两个长度都是N的序列A和B,在A和B中各取一个数相加可以得到N^2个和,求这N^2个和中最小的N个. ...

  7. Java开发笔记(九十九)定时器与定时任务

    前面介绍了线程的几种运行方式,不管哪种方式,一旦调用了线程实例的start方法,都会立即启动线程的事务处理.然而某些业务场景在事务执行时间方面有特殊需求,例如期望延迟若干时间之后才开始事务运行,又如期 ...

  8. UIButton图片文字位置的四种情况

    我们在做项目的过程中经常会遇到各定制UIButton 1.左边图片,右边文字 2.左边文字,右边图片 3.上边图片,下边文字 4.上边文字,下边图片 针对这四种情况 使用UIButton的catego ...

  9. Python 出现 can't use a string pattern on a bytes-like object

    Python 出现 can't use a string pattern on a bytes-like object 学习了:https://www.cnblogs.com/andrewleeeee ...

  10. SSD硬盘安装系统后要做的事

    1***cmd>fsutil behavior query DisableDeleteNotify 0如果返回值是0,则代表TRIM处于开启状态:反之如果返回值是1,则代表TRIM处于关闭状态2 ...