有可能在引导程序中做一个部分折叠的侧边栏吗

Is it possible to do a partially collapsing sidebar in bootstrap

本文关键字：一个 折叠 侧边栏 引导程序 有可能      更新时间：2023-09-26

我正在尝试构建一个Bootstrap页面，该页面将有一个侧边栏，在滚动时会部分折叠。。。它应该折叠成一个更窄的版本（例如图标而不是文本样式），这种折叠将在滚动时发生，然后可以通过单击元素打开到它的全宽。

我遇到的问题是，在考虑引导的情况下，我不知道如何实现这一点，因为对于宽屏幕，侧边栏需要固定在最左边（或右边）。。。（不是助推段的一部分…）。。。而对于平板电脑视图，例如，我认为侧边栏需要占据一个或多个列（否则我需要调整整个页面上的正文填充），我可以这样做，但我希望有一些久经考验的方法。我确信我已经看到了这种技术的使用，但我找不到一个例子。有人知道如何解决这个问题吗，或者这是否可能。

HTML:

<div id="wrapper">
  <div id="sidebar">
    .....
  </div>
</div>

JS:

$( window ).scroll(function() {
    $("#wrapper").toggleClass("active");
});

CSS：

#sidebar{
  position: fixed;
  left: 0;
  width: 200px;
}
#wrapper.active #sidebar{
  width: 100px;  
}

这将在窗口滚动时切换侧边栏的宽度。您还可以将窗口滚动的功能添加到侧边栏鼠标单击事件侦听器中。

相关文章：