在从事 nextjs 项目时，我偶然发现了一种情况，我希望我的侧边栏组件可折叠。乍一看，它看起来很简单，可以使用诸如 usestate 之类的 react hook 来维护切换状态。
但是使用钩子会迫使我将组件制作为客户端，这是我不想要的。
因此，我在互联网的海洋中徘徊，寻找可能的解决方案来解决我的问题，并找到了一个后门来实现我想要的结果，那就是..鼓声…. 复选框，是的，你没看错，复选框将充当切换器。
我们可以使用复选框选中状态来切换我们的珍贵的、小的、服务器渲染的侧边栏。
抛开所有这些，让我们立即开始编写代码。
请注意，我将使用 tailwind css 进行样式设置。
好的，首先让我们为我们的应用程序设置一个样板代码，我们需要一个侧边栏和一个主仪表板部分。我们可以使用下面的代码来实现
{/* main content */} hello, dev!
现在我们已经准备好了样板，现在我们进入主要部分，即添加一个按钮来切换侧边栏。为此，我们必须添加带有标签的复选框作为切换图标，例如汉堡。我们将隐藏该复选框，因为它看起来很难看，只需保留标签来选中/取消选中它。
酷，我们有复选框了。我们只需要连接一些电线，这样我们就可以在取消选中复选框时隐藏我们的菜单，并在选中它时显示该菜单。
我们可以使用 checked 伪类来实现这一点。
好吧，我明白你的提示了，不废话，我们知道这一切，只需告诉我代码..，是的，拿着我的奶昔
是的，这就是实现可折叠行为所需的全部。
您想要什么更好的样式以便直接使用？
我支持你，你走吧Hello, collapsible sidebar is made just using CSS 在这里尝试一下
希望我能有所帮助，请在此处查看我的开发作品集。
以上就是仅使用 CSS 构建可折叠侧边栏的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630866.html
微信扫一扫
支付宝扫一扫
