移动端（小屏设备）移除指定div类名的实现方案求助

嘿，我看到你尝试在移动端页面加载时移除.side-navbar的shrinked类和.content-inner的active类，但脚本没生效，这大概率是两个小细节出错了，我来帮你搞定~

一、先排查你原有脚本的错误点 #

你写的移除类代码里有两个关键问题：

1. 选择器语法错误：$(".side-navbar shrinked") 这种写法是找.side-navbar下的shrinked标签，而不是带有shrinked类的.side-navbar元素！正确的类选择器应该是.side-navbar.shrinked（两个类之间无空格），同理.content-inner.active也是一样的道理。
2. 事件已废弃：$(window).load() 在jQuery 3.0之后已经被废弃，推荐用$(document).ready()（DOM加载完成就执行）或者$(window).on('load', function(){...})，这里用ready就足够，因为我们只需要操作DOM元素。

二、修正后的JavaScript解决方案 #

下面是修复后的代码，还额外加了窗口resize监听，用户旋转屏幕时也能自动调整类状态：

// 保留你原来的侧边栏切换逻辑
$('#toggle-btn').on('click', function (e) { 
  e.preventDefault(); 
  $(this).toggleClass('active'); 
  $('.side-navbar').toggleClass('shrinked'); 
  $('.content-inner').toggleClass('active'); 
  $(document).trigger('sidebarChanged'); 

  if ($(window).outerWidth() > 1183) { 
    if ($('#toggle-btn').hasClass('active')) { 
      $('.navbar-header .brand-small').hide(); 
      $('.navbar-header .brand-big').show(); 
    } else { 
      $('.navbar-header .brand-small').show(); 
      $('.navbar-header .brand-big').hide(); 
    } 
  } 
  if ($(window).outerWidth() < 1183) { 
    $('.navbar-header .brand-small').show(); 
  } 
}); 

// 修正后的类状态调整逻辑
$(document).ready(function () {
  // 封装成函数方便复用
  function updateSidebarState() {
    const viewportWidth = $(window).width();
    if (viewportWidth < 600) {
      // 移动端移除指定类
      $(".side-navbar").removeClass("shrinked");
      $(".content-inner").removeClass("active");
    } else {
      // 大屏时恢复默认类（可选，根据你的需求调整）
      $(".side-navbar").addClass("shrinked");
      $(".content-inner").addClass("active");
    }
  }

  // 页面加载时执行一次
  updateSidebarState();
  // 窗口大小改变时重新执行
  $(window).on('resize', updateSidebarState);
});

三、CSS媒体查询替代方案 #

如果你不想依赖JavaScript，用CSS媒体查询也能达到同样效果，原理是在小屏设备上覆盖shrinked和active类的样式，让它们表现得和没有类一样：

/* 针对屏幕宽度小于600px的设备 */
@media (max-width: 599px) {
  /* 覆盖.side-navbar.shrinked的样式，恢复默认状态 */
  .side-navbar.shrinked {
    width: 250px !important; /* 替换成你侧边栏默认的宽度 */
    /* 可添加更多覆盖样式，比如padding、transform等，根据原有shrinked类样式调整 */
  }

  /* 覆盖.content-inner.active的样式，恢复默认状态 */
  .content-inner.active {
    margin-left: 250px !important; /* 替换成你内容区默认的左边距 */
    /* 其他需要覆盖的样式同理 */
  }
}

这种方法的好处是不需要等待JS加载，样式会立即生效，适合对加载速度有要求的场景。

内容的提问来源于stack exchange，提问作者HellorhighWater