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);
                } 
            });
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容

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