Layui单页面遍历左侧菜单

 var menus = [
        {
            title: "账户",
            icon: "accountNavImg",
            hide: false,
            child: [
                {
                    title: "企业信息",
                    hide: false,
                    href: "../../views/settings/enterprise.html",
                    target: "_self"
                },
                {
                    title: "客服与分组",
                    hide: false,
                    href: "../../views/settings/operators.html",
                    target: "_self"
                },
                {
                    title: "角色设置",
                    hide: false,
                    href: "../../views/settings/roles.html",
                    target: "_self"
                },
                {
                    title: "安全设置",
                    hide: false,
                    href: "../../views/settings/security.html",
                    target: "_self"
                }
            ]
        },
        {
            title: "渠道接入",
            icon: "channelNavImg",
            hide: false,
            child: [
                {
                    title: "网页插件",
                    hide: false,
                    href: "../../views/settings/webplug.html",
                    target: "_self"
                },
                {
                    title: "聊天链接",
                    hide: false,
                    href: "../../views/settings/operators.html",
                    target: "_self"
                },
                {
                    title: "微信公众号",
                    hide: false,
                    href: "../../views/settings/roles.html",
                    target: "_self"
                },
                {
                    title: "微信小程序",
                    hide: false,
                    href: "../../views/settings/security.html",
                    target: "_self"
                },
                {
                    title: "企业微信",
                    hide: false,
                    href: "../../views/settings/security.html",
                    target: "_self"
                },
                {
                    title: "新浪微博",
                    hide: false,
                    href: "../../views/settings/security.html",
                    target: "_self"
                },
                {
                    title: "抖音企业号",
                    hide: false,
                    href: "../../views/settings/security.html",
                    target: "_self"
                },
                {
                    title: "小程序插件",
                    hide: false,
                    href: "../../views/settings/security.html",
                    target: "_self"
                },
                {
                    title: "百度营销通",
                    hide: false,
                    href: "../../views/settings/security.html",
                    target: "_self"
                },
                {
                    title: "信息对接",
                    hide: false,
                    href: "../../views/settings/security.html",
                    target: "_self"
                },
                {
                    title: "App接入",
                    hide: false,
                    href: "../../views/settings/security.html",
                    target: "_self"
                }
            ]
        }
    ];

var html = '';
var ulength = menus.length + 1;
for (var i = 0; i < menus.length; i++) {
    ulength--;
    html += ' <div class="commonNav">';
    html += '<div class="commonNavFirst">';
    html += '<div class="commonNavInside">';
    html += ' <i class="' + menus[i].icon + '"></i>';
    html += '<span class="commonNavText">' + menus[i].title + '</span>';
    html += '</div>';
    html += ' <i class="commonNavIcon"></i>';
    html += '  </div>';
    for (var j = 0; j < menus[i].child.length; j++) {
          html += '<ul class="commonNavUl">';
          html += '<li data-href=' + menus[i].child[j].href + '>' + menus[i].child[j].title + '</li>'
          html += ' </ul>';
      }
       html += '</div>';
}
$(".commonMenu").append(html)

<script>
    $("body").on("click", '.commonNavFirst', function () {
        if ($(this).nextAll(".commonNavUl").css("display") == 'block') {
        $(this).nextAll(".commonNavUl").hide('fast');
            //$(this).children(".commonNavIcon").css('background', 'url(../../asset/images/settings_images.png) -32px -42px no-repeat');
            $(this).removeClass("active");
        }
        else {
        $(this).nextAll(".commonNavUl").show('fast')
            // $(this).children(".commonNavIcon").css('background', 'url(../../asset/images/settings_images.png) -16px -42px no-repeat');
            $(this).addClass("active");
        }
    })
    $("body").on("click", '.commonNavUl li', function () {
        $(".commonNavUl li").removeClass("active");
        $(this).addClass("active");
        $(".commonNavFirst").removeClass('active')
        $(this).parent().prevAll(".commonNavFirst").addClass('active')
    })
    $("body").on("mouseover", ".forTextoverflow", function () {
        $(this).next(".massObjectHover").show();
    });
    $("body").on("mouseout", ".forTextoverflow", function () {
        $(this).next(".massObjectHover").hide();
    });
</script>

.commonNavFirst {
  cursor: pointer;
  padding: 0px 24px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.commonNavFirst.active {
  color: #0c66ff;
}
.commonNavFirst.active .commonNavIcon {
  color: #0c66ff;
  background: url(../../images/settings_images.png) 0px -42px no-repeat;
}

.commonNavInside {
  display: flex;
  align-items: center;
}
.commonNavUl {
  width: 100%;
}
.commonNavUl li {
  height: 48px;
  line-height: 48px;
  text-align: left;
  margin-bottom: 1px;
  padding-left: 48px;
  color: #333;
  cursor: pointer;
}

.commonNavUl li.active,
.commonNavUl li:hover {
  background: #edf4ff;
  color: #0c66ff;
}
.accountNavImg,
.channelNavImg {
  background: url(../../images/settings_images.png) 0px -19px no-repeat;
  width: 17px;
  height: 15px;
  display: block;
  margin-right: 10px;
}
.commonNavFirst.active .accountNavImg {
  background: url(../../images/settings_images.png) -24px -19px no-repeat;
}

.channelNavImg {
  background: url(../../images/settings_images.png) -48px -19px no-repeat !important;
}
.commonNavFirst.active .channelNavImg {
  background: url(../../images/settings_images.png) -72px -19px no-repeat !important;
}

.commonNavIcon {
  background: url(../../images/settings_images.png) 0px -42px no-repeat;
  width: 9px;
  height: 6px;
}
.commonNavFirst.active .commonNavIcon {
  background: url(../../images/settings_images.png) -16px -42px no-repeat;
}