Question

我做了一个函数，我检查窗口是否已经调整大小并且元素是可见的，以便更改某些类并添加一点css。问题是如果我刷新页面，则更改被还原。以下是我的代码片段：

Answer 1

$(document).ready(function() {  
  
 function resizeChanges(){
    if(isMenuVisible() == true){
       $('#my-nav').removeClass('navbar-fixed-bottom');
       $('#my-nav').addClass('navbar-fixed-top');
       $('body').css('padding-top', '50px');
     }else{
       $('#my-nav').removeClass('navbar-fixed-top');
       $('#my-nav').addClass('navbar-fixed-bottom');
       $('body').css('padding-top', '0');  
     }   
 }
 
 $(window).resize(resizeChanges);
 
 resizeChanges();
});

通过这种方式，您可以定义一个单独的函数来进行更改，添加事件侦听器以触发它，还可以在加载/刷新后调用该函数。

Answer 2

尝试在加载后触发窗口上的resize事件。

$(window).trigger('resize');

Answer 3

如果用户刷新页面，则客户端的所有更改都将丢失。但是，您可以检测用户何时刷新页面并将值保存在服务器端。然后，当再次加载页面时，恢复这些值。

$(window).on('beforeunload', function(){
    // save the values to server side
});

$(window).on('load', function(){
    // restore values
});

页面刷新后执行jQuery函数

3 个答案: