layui动态添加顶部导航栏，悬停失效

解决layui动态添加顶部导航栏，悬停失效的问题

问题描述：

使用layui 动态加载水平导航，悬停触发不了，无法显示子菜单

   var c = 0;
   //页面初始添加顶部所有菜单
   $.each(data, function(i, obj) {
       // alert(obj.id)
       var contentNav = '';
       // 默认选中第一个导航
       if (i < 4) {
           contentNav = '<li class="layui-nav-item">';
           contentNav += '<a href="javascript:;" οnclick="capture(this)">' + obj.name + '</a></li>';
           $('#menus').append(contentNav);
       } else {
           if (c == 0) {
               var content = '<li class="layui-nav-item"><a href="javascript:;">更多</a><dl class="layui-nav-child"></dl></li>';
               $('#menus').append(content);
               c = 1;
           }
           contentNav += '<dd><a οnclick="capture(this)">' + obj.name + '</a></dd>';
           $('#menus dl').append(contentNav);
       }
   });

---

解决方案：

将Layui在页面加载时渲染出来的span.layui-nav-bar提前删除掉

 $("#menus").find('span.layui-nav-bar').remove();
 var content = '<li class="layui-nav-item"><a href="javascript:;">更多</a><dl class="layui-nav-child"></dl></li>';

参考：
https://www.yisu.com/zixun/159725.html