(function(){ //点击一级目录 $(".first-leve-div span").click(function(e){ e.stopPropagation(); $(this).next("ul").slideToggle(); }) // 点击二级目录 $('.second-leve-ul a').click(function(e){ e.stopPropagation(); var second_leve_ul = $(this).parent().next('ul'); // 如果没有三级菜单 if (second_leve_ul.length == 0) { //清除li的激活样式 $(".second-leve-ul").find('li').removeClass('active'); $(this).parent("li").addClass("active"); //移动端点击菜单改变顶部标题,便于清楚知道选择了什么栏目 var titleText = $(this).text(); phoneChangeTitle (titleText); //点击目标链接之后要做的逻辑放在这里(如跳转页面) console.log('doSomeThing') //注意:最后要执行该方法,让菜单卷起 if ( $("#right-top-button").css("display") == "block") { $("#right-top-button").click(); } }else { //移动端点击菜单改变顶部标题,便于清楚知道选择了什么栏目 var titleText = $(this).text(); phoneChangeTitle (titleText); second_leve_ul.slideToggle(); } }); //点击左侧伸缩按钮 function pullLeft(){ $(".pull-left-target").on("click",function(e){ e.stopPropagation(); //将两个推拉按钮统一起来 var that = ($(this).children().length == 0) ? $(this) : $(this).children(), targetMove = $(".bi-director-left"), cssLeftString = targetMove.css("left").split("px")[0], cssLeft = parseInt(cssLeftString), leftWidth = targetMove.outerWidth(); if (cssLeft >= 0) { // 左侧菜单向左边移动 $(".bi-director-left").animate({left:-leftWidth+'px'}); that.addClass("icon-caret-right").removeClass("icon-caret-left"); //右边内容区撑满屏幕 $(".sidebar").css("position","absolute"); $(".main").removeClass("col-sm-9 col-md-9 col-lg-10"); }else if ( cssLeft < 0) { $(".bi-director-left").animate({left:0}); that.addClass("icon-caret-left").removeClass("icon-caret-right"); $(".main").addClass("col-sm-9 col-md-9 col-lg-10"); $(".sidebar").css("position","relative"); } }) } pullLeft(); //动态设置左侧菜单栏高度 function reloadChangeSize(){ $('.bi-director-left').css('height',function () { if (window.outerheight){ var winHeight=0; winHeight = window.outerheight; }else if((document.body) && (document.body.clientHeight)){ winHeight = document.body.clientHeight; } return winHeight; }) } function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(), bIsIpad = sUserAgent.match(/ipad/i) == "ipad", bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os", bIsMidp = sUserAgent.match(/midp/i) == "midp", bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4", bIsUc = sUserAgent.match(/ucweb/i) == "ucweb", bIsAndroid = sUserAgent.match(/android/i) == "android", bIsCE = sUserAgent.match(/windows ce/i) == "windows ce", bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile", isPhone = (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM); //如果不在移动端 if (!isPhone) { //pc端则动态执行左侧菜单高度 reloadChangeSize(); } else if ( bIsIpad) { $(".pull-left-btn").show(); $("#left-button-flex").hide(); }else{ return isPhone; } } var isPhone = browserRedirect(); //改变顶部标题 function phoneChangeTitle (titleText){ if (isPhone) { var phoneTitle = $(".navbar-brand"); phoneTitle.text(titleText); } } })()
pc移动端自适应布局js脚本(一)
最新推荐文章于 2024-06-03 20:21:49 发布