使用CSS媒体查询和JavaScript代码来控制边栏的显示和隐藏。
CSS媒体查询部分代码示例:
@media only screen and (max-width: 768px) { .sidebar { display: none; } }
JavaScript部分代码示例:
const sidebar = document.querySelector('.sidebar'); const menuToggle = document.querySelector('.menu-toggle');
menuToggle.addEventListener('click', () => { sidebar.classList.toggle('active'); });
在此示例中,当屏幕宽度小于768px时,使用CSS媒体查询来隐藏侧边栏。当用户单击菜单切换按钮时,使用JavaScript代码来切换侧边栏的活动状态,以便在需要时显示或隐藏它。