SB Admin 2 如何让侧边栏在屏幕缩小的时候隐藏

 

我在使用开源的后台管理系统模板 sb-admin2 时发现,如果在手机上查看,侧边栏会缩小但不会消失,需要点击屏幕上的一个按钮(sidebarToggleTop)才能真正收起侧边栏。因此,我开始和 ChatGPT 结对编程,探讨如何让页面加载时判断屏幕大小,如果屏幕小于 768 像素,则自动隐藏侧边栏。

在 sb-admin2 中,sidebarToggleTop 组件是一个按钮,用于控制侧边栏的展开和折叠。默认情况下,该组件会触发一个名为 “sidebarToggle” 的自定义事件,在侧边栏的展开和折叠之间进行切换。

就是这个按钮

为了实现自动隐藏侧边栏的功能,我直接模拟用户点击 sidebarToggleTop 按钮,从而触发该按钮所绑定的点击事件。具体步骤如下:

  1. 获取 sidebarToggleTop 元素:
const sidebarToggleTop = document.querySelector('#sidebarToggleTop');
  1. 调用 click() 方法触发点击事件:
sidebarToggleTop.click();

这样,执行完上述代码后,就会模拟用户点击 sidebarToggleTop 元素,触发 sb-admin2 中的 sidebarToggleTop 组件所绑定的点击事件。如果代码中监听了该事件,那么监听函数就会被触发,并执行相应的操作。

为了实现页面加载时自动隐藏侧边栏的功能,我在代码中监听了屏幕大小改变事件,整个代码如下:

function handleSidenavToggle() {
  if (document.body.clientWidth < 768) {
    $('#sidebarToggleTop').click();
  }
}

$(window).on('load resize', handleSidenavToggle);

需要注意的是,在使用 click() 方法触发点击事件时,必须确保该元素已经被加载到页面上并且可见。如果该元素还没有被加载或者被隐藏了,那么 click() 方法可能会无效。最后,我喊 ChatGPT 把代码缩简到一行:

$(window).on("load resize", function() {if (document.body.clientWidth < 768) $('#sidebarToggleTop').click();});