美文网首页
bootstrap ace dropdown-toggle事件

bootstrap ace dropdown-toggle事件

作者: Ysj1111 | 来源:发表于2018-09-04 08:42 被阅读324次

火狐浏览器隐藏滚动条:

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

相关文章

网友评论

      本文标题:bootstrap ace dropdown-toggle事件

      本文链接:https://www.haomeiwen.com/subject/ajpylftx.html