基于Alpine.js与Tailwind的导航栏：按屏幕尺寸自动切换展开状态

直接给你能落地的方案，核心是利用原生matchMediaAPI监听屏幕断点变化，结合Alpine.js的状态管理来自动切换导航栏的展开/关闭状态：

完整代码示例 #

<nav x-data="{ open: window.matchMedia('(min-width: 768px)').matches }" 
     x-init="
       // 创建对应Tailwind md断点的媒体查询对象
       const mediaQuery = window.matchMedia('(min-width: 768px)');
       // 断点变化时更新open状态
       const handleMediaChange = (e) => { open = e.matches; };
       // 添加监听
       mediaQuery.addEventListener('change', handleMediaChange);
       // 组件销毁时移除监听，避免内存泄漏
       $on('destroy', () => mediaQuery.removeEventListener('change', handleMediaChange));
     "
     class="navclasses">
  <!-- 小屏显示切换按钮，大屏隐藏 -->
  <button x-on:click="open = !open" class="buttonclasses md:hidden">菜单</button>
  <!-- 大屏强制显示，小屏由Alpine控制显示/隐藏 -->
  <div x-show="open" class="md:block">
    <ul>
      <li>links to other pages in site</li>
    </ul>
  </div>
</nav>

关键逻辑说明 #

1. 初始状态设置
   页面加载时，通过window.matchMedia('(min-width: 768px)').matches直接判断当前屏幕是否大于等于md断点（768px），自动设置导航栏的初始展开/关闭状态，解决你现在加载时默认关闭的问题。

2. 断点变化监听
   在x-init里创建媒体查询对象，监听屏幕尺寸变化：

   • 当屏幕宽度≥768px时，自动将open设为true，导航展开
   • 当屏幕宽度<768px时，自动将open设为false，导航关闭

3. 交互优化

   • 按钮添加md:hidden类，只在小屏显示，大屏下隐藏（因为大屏导航始终展开，不需要切换按钮）
   • 导航容器添加md:block类，大屏下强制显示，和Alpine的x-show形成双重保障，避免状态冲突

4. 内存泄漏预防
   用Alpine的$on('destroy')钩子在组件销毁时移除媒体查询监听，避免不必要的内存占用。

额外说明 #

• 小屏下依然保留按钮的手动切换功能，用户可以手动打开/关闭导航
• 如果在大屏下手动关闭了导航，当屏幕缩小再放大时，导航会自动重新展开，符合需求

内容的提问来源于stack exchange，提问作者Chris Rad