如何用Tailwind实现小屏设备点击菜单图标时侧边弹出显示Div

核心思路 #

通过Tailwind的过渡类和状态切换结合简单JS逻辑，实现小屏设备下侧边栏的滑入滑出效果。

具体修改步骤 #

• 调整侧边栏基础样式
  给第一个div（消息区域）添加小屏默认隐藏规则：fixed left-[-100%] top-0 h-full w-3/4 z-50 transition-all duration-300，让它默认处于视口左侧外，同时添加过渡动画保证滑动流畅；保留原有的md:block类，确保中大屏正常显示。
• 添加菜单按钮交互逻辑
  给菜单图标所在div绑定点击事件，切换侧边栏的left-0（显示）和left-[-100%]（隐藏）类：

  const menuBtn = document.querySelector('.menu-btn');
  const sidebar = document.querySelector('.sidebar');
  
  menuBtn.addEventListener('click', () => {
    sidebar.classList.toggle('left-0');
  });
  

• 完善细节体验
  可给侧边栏添加bg-white shadow-lg增强视觉层级；额外监听全局点击事件，点击侧边栏和按钮外区域时自动关闭侧边栏：

  document.addEventListener('click', (e) => {
    if (!sidebar.contains(e.target) && !menuBtn.contains(e.target)) {
      sidebar.classList.remove('left-0');
    }
  });
  

完整结构示例 #

<div class="sidebar fixed left-[-100%] top-0 h-full w-3/4 bg-white shadow-lg z-50 transition-all duration-300 md:block">
  <!-- 消息区域内容 -->
</div>
<div class="menu-btn md:hidden">
  <!-- 菜单图标 -->
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
  </svg>
</div>
<script>
const menuBtn = document.querySelector('.menu-btn');
const sidebar = document.querySelector('.sidebar');

menuBtn.addEventListener('click', () => {
  sidebar.classList.toggle('left-0');
});

document.addEventListener('click', (e) => {
  if (!sidebar.contains(e.target) && !menuBtn.contains(e.target)) {
    sidebar.classList.remove('left-0');
  }
});
</script>

内容的提问来源于stack exchange，提问作者rameez khan