时间戳

首页 > 解决方案 > jQuery - If 语句检测页面加载

javascript - jQuery - If 语句检测页面加载

问题描述

我有一个旨在自动隐藏小屏幕上的侧边栏的功能。通过添加一个影响侧边栏边距的 id 来隐藏侧边栏。过渡用于动画它向左滑动。

由于我不希望侧边栏在页面加载时滑出屏幕，因此我通过添加一个类来删除过渡然后在 0.5 秒（即过渡的长度）后删除该类来抵消这一点。

我在页面加载和窗口调整大小时都运行了以下函数。我只希望在页面加载时删除转换，所以有没有办法使用 if 语句来检测这一点。

function setSidebarState() {
    if($(window).width() < 960) {
        $(".wrapper").attr("id", "sidebarClosed");

        //Page load only
        if($(document).ready()) {
        /***if(!$(window).resize()) - this also doesn't work***/
            $(".sidebar, .content").addClass("noTransition");

            setTimeout(function() {
                $(".sidebar, .content").removeClass("noTransition");
            }, 500);
        }
    }
    else {
        $(".wrapper").attr("id", "");
    }
}

$(document).ready(function() {  
    setSidebarState();
}); 

$(window).resize(function() {  
    setSidebarState();
});

CSS很简单

.sidebar {
    width: 320px;
    position: fixed;
    height: 100vh;
    background: #333;
}

.content {
    margin-left: 320px;
}

.wrapper#sidebarClosed > .sidebar {
    margin-left: -270px;
}

.wrapper#sidebarClosed > .content {
    margin-left: 50px;
}

标签： javascriptjquerycss

解决方案

您需要做的就是拥有一个可以传递给函数的布尔参数：

function setSidebarState(pageLoad) {
    if($(window).width() < 960) {
        $(".wrapper").attr("id", "sidebarClosed");

        //Page load only
        if(pageLoad) {
            $(".sidebar, .content").addClass("noTransition");

            setTimeout(function() {
                $(".sidebar, .content").removeClass("noTransition");
            }, 500);
        }
    }
    else {
        $(".wrapper").attr("id", "");
    }
}

$(document).ready(function() {  
    setSidebarState(true);
}); 

$(window).resize(function() {  
    setSidebarState(false);
});

推荐阅读