火狐浏览器隐藏滚动条:
#navMenuWrapper {
max-width: 189px;
overflow: hidden;
}
#navManu {
max-height: calc(100vh - 135px);
overflow-x: hidden;
overflow-y: scroll;
width: 205px;
}
问题:点击每一项时保证展开的子菜单可见(操作滚动条的位置)
解决方法:移除类dropdown-toggle,手动操作显示和隐藏,因为加上这个类css的变化总在js后面,导致无法在js中控制滚动条的位置;获取点击元素距页面底端的距离,如果高度不够,就让滚动条向下滚动使其可见,如果点击元素距页面顶端不在可见区域内,让滚动条向上滚动使其可见。
html:
html += "<li>";
html += "<a href=\"" + res.data[manuIndex].Path + "\">";
html += "<i class=\"" + res.data[manuIndex].Icon + "\"></i>";
html += "<span class=\"menu-text\">" + res.data[manuIndex].Name + "</span>";
html += "<b class=\"arrow icon-angle-down\"></b>";
html += "</a>";
html += "<ul class=\"submenu\">";
for (var subManuIndex = 0; subManuIndex < res.data[manuIndex].SubMenus.length; subManuIndex++) {
html += "<li>";
html += "<a path=\"" + res.data[manuIndex].SubMenus[subManuIndex].Path + "\" style=\"cursor:pointer;\" onclick=\"loadHtml(this);\">";
html += "<i class=\"" + res.data[manuIndex].SubMenus[subManuIndex].Icon + "\"></i>" + res.data[manuIndex].SubMenus[subManuIndex].Name;
html += "</a>";
html += "</li>";
}
html += "</ul>";
html += "</li>";
js:
$("#navManu li a:has(b)").on("click.bs.dropdown", function () {
var obj = $(this).parent();
//console.log("Opening dropdown..");
//手动处理菜单项显示和隐藏
if (oldobj == null) {//首次点击,显示
$(obj).attr("class", "active open");
$(obj).find(".submenu").css("display", "block");
$(obj).find(".arrow").css("transform", "rotate(90deg)");
oldobj = obj;
} else if ($(oldobj).html() == $(obj).html()) {//和上次点击菜单相同,隐藏
$(obj).removeClass("active open");
$(obj).find(".submenu").css("display", "none");
$(obj).find(".arrow").css("transform", "rotate(0deg)");
oldobj = null;
} else {//点击了其他菜单,隐藏上个,显示当前
$(oldobj).removeClass("active open");
$(oldobj).find(".submenu").css("display", "none");
$(oldobj).find(".arrow").css("transform", "rotate(0deg)");
$(obj).attr("class", "active open");
$(obj).find(".submenu").css("display", "block");
$(obj).find(".arrow").css("transform", "rotate(90deg)");
oldobj = obj;
}
//if ($(obj).attr("class") == 'active open') {
// $(obj).removeClass("active open");
// $(obj).find(".submenu").css("display", "none");
//} else {
// $(obj).attr("class", "active open");
// $(obj).find(".submenu").css("display", "block");
//}
var h1 = $(obj).height();
var h2 = $(obj).find(".submenu").height();
var wh = $(window).height();//浏览器窗口高度
var xh = wh - (h1 + $(obj).offset().top);//元素到浏览器底部的高度
if (xh < 50) {
$("#navManu").scrollTop(-xh + 50 + $("#navManu").scrollTop());
}
if ($(obj).offset().top < 85) {
$("#navManu").scrollTop(-h2);
}
});