pc移动端自适应布局js脚本(一)

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

})()







  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值