先看问题现象:

使用 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. Chrome & CORS & Fetch API & Chrome 多开,应用分身

    Chrome & CORS & Fetch API Chrome 浏览器的跨域设置 https://www.cnblogs.com/cshi/p/5660039.html https: ...

  2. 概率dp呜呜

    概率dp有环怎么办? 答案可劲迭代 ,然后可劲消元 , 怎么消? 我就不知道了. 呵呵

  3. Thinkphp5.0 的视图view的模板布局

    Thinkphp5.0 的视图view的模板布局 使用include,文件包含: <!-- 头部 --> <div class="header"> {inc ...

  4. Our Journey of Dalian Ends 乌鲁木齐网络赛 最小费用最大流

    Life is a journey, and the road we travel has twists and turns, which sometimes lead us to unexpecte ...

  5. 配置文件的备份和IOS 的备份

    分享到 QQ空间 新浪微博 百度搜藏 人人网 腾讯微博 开心网 腾讯朋友 百度空间 豆瓣网 搜狐微博 百度新首页 QQ收藏 和讯微博 我的淘宝 百度贴吧 更多... 百度分享 广场 登录 注册 关注此 ...

  6. C#如何设置窗体不能修改大小

    找到FormBorderStyle设置为FixedDialog即可                      

  7. node-npm/yarn

    很多人对npm或yarn了解甚少吧,下面我介绍一下常用的yarn/npm所谓的包管理工具. 首先我先介绍一下,npm属于国外Google镜像(下载贼慢),yarn属于Facebook开发的. npm: ...

  8. js 合并对象

    对象的合并 需求:设有对象 o1 ,o2,需要得到对象 o3 var o1 = { a:'a' }, o2 = { b:'b' }; // 则 var o3 = { a:'a', b:'b' } 方法 ...

  9. 省市联动选择的一个demo,利用vue+webpack+amaze-vue实现省市区联动选择组件

    https://github.com/sunshineJi/vue-city-picker

  10. selenium第三课(selenium八种定位页面元素方法)

    selenium webdriver进行元素定位时,通过seleniumAPI官方介绍,获取页面元素的方式一共有以下八种方式,现按照常用→不常用的顺序分别介绍一下. 官方api地址:https://s ...