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 += "<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);
                } 
            });
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1 初中的时候,班上有个叫馨雅的女同学,皮肤黝黑,性格也很腼腆,常常用厚衣服把自己包裹起来,即使在炎热的夏天,她也...
    YOUNG客栈阅读 743评论 0 0
  • 第2话
    顾一Guyiim阅读 3,638评论 0 1
  • 周五开始我的第一课,老师让我们养成一个习惯,建立自己的花瓣画板,然后去采集不同分类的设计。 我之前有自己去收集不同...
    晓SpoFire阅读 280评论 0 1
  • 每当我看到甘蔗时,就会回忆起小时候一段与甘蔗有关的往事。 大概是十岁左右的冬天吧,有一天,我与伙伴们相约去放鹅。晚...
    简单的蜗牛阅读 447评论 0 2
  • 1、冰袋(雪宝)这种拿袋子装的饮料各地叫法不一样,但是却是小时候必不可少的零食之一,从1毛钱一袋涨到后来的5毛钱一...
    往反方向546阅读 2,389评论 0 0

友情链接更多精彩内容