基于Alpine.js+TailwindCSS解决移动端菜单点击关闭及返回回显问题

要解决这两个问题，只需做两处关键修改：

1. 点击菜单项时自动关闭菜单 #

给菜单列表的<ul>添加@click事件，利用事件冒泡特性，点击任何菜单项都会触发菜单关闭（无需给每个<a>标签单独绑定事件）：

<ul
  class="md:flex md:px-6 text-gray-900 font-bold"
  :class="{ 'absolute p-6 top-20 left-7 right-7 text-center text-white bg-red-500 drop-shadow-md ': menuIsOpen, 'hidden': !menuIsOpen}"
  id="navbar-main"
  x-cloak
  @click="menuIsOpen = false" <!-- 新增此行 -->
>

2. 解决后退时菜单保持展开的问题 #

浏览器的**后退缓存（BF Cache）**会保留页面的JS状态，导致返回上一页时菜单仍处于展开状态。我们可以通过Alpine的x-init监听pageshow事件，每次页面显示时强制重置菜单状态：
给<nav>标签添加初始状态声明和监听逻辑：

<nav id="nav-main" @click.outside="menuIsOpen = false" x-cloak 
  x-data="{ menuIsOpen: false }" <!-- 声明初始状态 -->
  x-init="
    window.addEventListener('pageshow', (event) => {
      if (event.persisted) {
        menuIsOpen = false;
      }
    });
  "
>

修改后的完整代码 #

<nav id="nav-main" @click.outside="menuIsOpen = false" x-cloak 
  x-data="{ menuIsOpen: false }"
  x-init="
    window.addEventListener('pageshow', (event) => {
      if (event.persisted) {
        menuIsOpen = false;
      }
    });
  "
>
  <!--Hamburger-->
  <button
    @click.prevent="menuIsOpen = ! menuIsOpen"
    class="tham tham-e-slider tham-w-6 relative md:hidden"
    :class="{'tham-active': menuIsOpen}"
  >
    <span class="tham-box">
      <span class="tham-inner bg-gray-900" />
    </span>
  </button>
  <!--Menu list-->
  <ul
    class="md:flex md:px-6 text-gray-900 font-bold"
    :class="{ 'absolute p-6 top-20 left-7 right-7 text-center text-white bg-red-500 drop-shadow-md ': menuIsOpen, 'hidden': !menuIsOpen}"
    id="navbar-main"
    x-cloak
    @click="menuIsOpen = false"
  >
    <li
      class="px-3 cursor-pointer hover:text-red transition-all"
      :class="{'py-3': menuIsOpen}"
    >
      <a href="/" class=" {{ 'md:text-red-500' if url === 'domov' }}"
        >Domov</a
      >
    </li>
    <li
      class="px-3 cursor-pointer hover:text-red transition-all"
      :class="{'py-3': menuIsOpen}"
    >
      <a href="/onas" class=" {{ 'md:text-red-500' if url === 'onas' }}"
        >O nás</a
      >
    </li>
    <li
      class="px-3 cursor-pointer hover:text-red transition-all"
      :class="{'py-3': menuIsOpen}"
    >
      <a href="/vyroba" class=" {{ 'md:text-red-500' if url === 'vyroba' }}"
        >Výroba</a
      >
    </li>
    <li
      class="px-3 cursor-pointer hover:text-red transition-all"
      :class="{'py-3': menuIsOpen}"
    >
      <a
        href="/kontakt"
        class=" {{ 'md:text-red-500' if url === 'kontakt' }}"
        >Kontakt</a
      >
    </li>
  </ul>
</nav>

原理说明 #

• 给<ul>绑定@click：借助事件冒泡，点击任何菜单项都会触发菜单关闭，比逐个绑定更简洁高效。
• pageshow事件监听：当页面从后退缓存中恢复时（event.persisted为true），强制将menuIsOpen重置为false，确保返回页面时菜单处于收起状态。

内容的提问来源于stack exchange，提问作者Ľubo