bootstrap ace dropdown-toggle事件

火狐浏览器隐藏滚动条:

#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 += "
  • "; html += ""; html += ""; html += "" + res.data[manuIndex].Name + ""; html += ""; html += ""; html += ""; html += "
  • ";

    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);
                    } 
                });
    

    你可能感兴趣的:(bootstrap ace dropdown-toggle事件)