手机端侧边导航

最新推荐文章于 2024-09-11 21:27:18 发布

tang05709

最新推荐文章于 2024-09-11 21:27:18 发布

阅读量898

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/tang05709/article/details/81094826

js 专栏收录该内容

109 篇文章

订阅专栏

css:

.nav-bar-mobile {
    position: fixed;
    top: 50px;
    left: -160px;
    width: 160px;
    padding: 10px;
    z-index: 999;
    overflow: hidden;
    border-bottom: none;
    overflow-y: auto;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}

.nav-bar-mobile::-webkit-scrollbar {
    width: 0 !important
}

js:

$('.mobile-nav-btn').unbind("click").click(function() {
            if ($('.nav-bar-mobile').hasClass('mobile-bar-none')) {
                $('.nav-bar-mobile').removeClass('mobile-bar-none');
                $(".nav-bar-mobile").animate({
                    left: "0px"
                }, 1000);
                $("#main").animate({
                    marginLeft: "160px"
                }, 1000);
            } else {
                $('.nav-bar-mobile').addClass('mobile-bar-none');
                $(".nav-bar-mobile").animate({
                    left: "-160px"
                }, 1000);
                $("#main").animate({
                    marginLeft: "0px"
                }, 1000);
            }
        })

很奇怪的是第一次加载完成点击执行了2次click,按f5刷新后就可以了,所以加了unbind