lane online

心平凡,自不凡

  • 莱恩在线
  • web攻城狮诱惑
  • 2B青年的文艺之路
  • 凡眼看世界
  • 我的电邮

技能树展示

Front-end frame

Bootstrap、AngularJS、react、vue

html&js&css

对js框架应用(如jQuery/typescript/layui等)有一定的经验; CSS3、JavaScript(es6)、jquery)、h5页面 less、sass技术(混编、指令、函数等方面应用) gurnt前端打包工具、webpack前端工具

vi&ui

Photoshop、illustrator
View More

思绪边缘

我时常想象自己沿着视野里的湖边一遍一遍的走着,看着春天的枝叶发出新芽,夏天里漫天飞舞的柳絮,秋日里被寒霜染红的落叶,冬日里最最欣喜的漫山遍野的雪景,料想这原本就是自己的一生,但自从遇见了不安,便让自己脱离里梦境,游走在时间与欲望的边缘,时而快乐着时而忧伤着的挥霍自己的青春。

web攻城狮诱惑

jquery实现移动端导航显示

时间:2018年02月14日 信息来源:lane 点击:次


响应式网站可以实现网站的自适应,通过媒体查询效率高,本文是实现网站自适应移动端的另一个途径!


话不多说,直接上代码(调用需要引入jquery库文件)



// 移动端导航

function mobleNav(mobileObj) {

    var _documentBody = $(document.body);

    var _mobileObj = $(mobileObj);

    var _screenVal = 480;

    var _width = $(document.body).width();

    // 获取需要展示图层

    var _show = _mobileObj.next();

    // 获取关闭按钮

    var _btnClose = _show.children("span");

    if(!(_width < _screenVal) ){

        _mobileObj.css("display","none");

    }

    // 展示

    _mobileObj.on('click',function () {

        if(_mobileObj.attr("isShow")){

            _mobileObj.removeAttr("isShow");

            _show.css("display","none");

        }else{

            _mobileObj.attr("isShow",true);

            _show.css("display","block");

            _documentBody.css("overflow-y","hidden");

        }

    });

    // 隐藏

    _btnClose.on('click',function () {

        if(_mobileObj.attr("isShow")){

            _mobileObj.removeAttr("isShow");

            _show.css("display","none")

            _documentBody.css("overflow-y","auto");

        }

    });

};


相关新闻

  • html5验证码自动切换焦点
  • 关于vue2中nextTick的理解
  • elementui级联选择器显示错位bug解决
  • vue项目打包部署
  • 使用WxParse.wxParse之详情页面部分安卓手机无法显示bug
  • 网站首页|
  • 给我发邮件|
  • 码云

Copyright © 2024laneol All rights reserved. 莱恩在线 网站备案:京ICP备2022036069号-1