要实现边栏折叠后,侧边栏中的文本不会隐藏,可以使用以下代码示例:
HTML:
CSS:
.sidebar {
width: 200px;
background-color: #f1f1f1;
}
.sidebar-content {
display: block;
}
.sidebar-content.collapsed {
display: none;
}
JavaScript:
const toggleButton = document.getElementById('toggleButton');
const sidebarContent = document.querySelector('.sidebar-content');
toggleButton.addEventListener('click', function() {
sidebarContent.classList.toggle('collapsed');
});
上述代码中,我们创建了一个包含折叠按钮和侧边栏内容的容器。侧边栏内容的初始状态是展开的,在CSS中定义了.collapsed
类,用于将侧边栏内容的display
属性设置为none
,实现折叠效果。
在JavaScript中,我们使用.classList.toggle()
方法来切换侧边栏内容的.collapsed
类。当点击折叠按钮时,会触发click
事件,通过添加或移除.collapsed
类来切换侧边栏内容的显示状态。
这样,当折叠按钮被点击时,侧边栏内容会折叠或展开,而不会隐藏文本内容。