nav.jpg
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;
}
网友评论