如何默认隐藏TailwindCSS下拉菜单？实现点击/hover触发显示

我使用TailwindCSS和纯HTML（配合Alpine.js）开发下拉菜单，希望菜单默认隐藏，仅在点击按钮或鼠标悬停时显示，但目前菜单始终可见。代码如下：

<li class="relative" x-data="{isOpen:false}">
  <button  @click="isOpen=!isOpen"  class=" block text-sm font-bold outline-none  focus:outline-none  text-blue-900 " href="#">
    SERVICES</button>
  
  <div 
    class="right-0 p-2 mt-1 bg-white rounded-md shadow lg:absolute"
    :class="{'hidden':!isOpen'flex flex-col':isOpen}"
    @click.away="isOpen = false">
    <a href="#" class="flex p-2 font-medium text-gray-600 rounded-md  hover:bg-gray-100 hover:text-black">Categories</a>

    <a href="#" class="flex p-2 font-medium text-gray-600 rounded-md  hover:bg-gray-100 hover:text-black">Inventories</a>
         
    <a href="#" class="flex p-2 font-medium text-gray-600 rounded-md  hover:bg-gray-100 hover:text-black">Brands</a>
  </div>
</li>

问题分析与修复方案 #

1. 动态类绑定语法错误
   你在:class指令中的对象语法存在错误——两个键值对之间缺少逗号分隔，导致Alpine.js无法正确解析类切换规则，这是菜单始终可见的核心原因。正确的写法应该是：

   :class="{'hidden': !isOpen, 'flex flex-col': isOpen}"
   

2. 初始状态未设置隐藏
   即使修复语法，为了确保菜单默认处于隐藏状态，建议直接给下拉div添加初始的hidden类，配合动态类逻辑，保证页面加载时菜单不会显示：

   <div class="hidden right-0 p-2 mt-1 bg-white rounded-md shadow lg:absolute"
        :class="{'hidden': !isOpen, 'flex flex-col': isOpen}"
        @click.away="isOpen = false">
   

3. 添加鼠标悬停触发逻辑
   要实现点击+悬停双触发效果，可结合Tailwind的group类和Alpine.js的鼠标事件：

   • 给父元素<li>添加group类
   • 给下拉div添加group-hover:flex group-hover:!hidden类，同时添加@mouseenter="isOpen = true"和@mouseleave="isOpen = false"事件，确保鼠标悬停时菜单保持打开，离开时关闭

完整修正后的代码：

<li class="relative group" x-data="{isOpen: false}">
  <button @click="isOpen = !isOpen" class="block text-sm font-bold outline-none focus:outline-none text-blue-900">
    SERVICES
  </button>
  
  <div 
    class="hidden right-0 p-2 mt-1 bg-white rounded-md shadow lg:absolute flex-col"
    :class="{'hidden': !isOpen, 'flex': isOpen}"
    @mouseenter="isOpen = true"
    @mouseleave="isOpen = false"
    @click.away="isOpen = false">
    <a href="#" class="flex p-2 font-medium text-gray-600 rounded-md hover:bg-gray-100 hover:text-black">Categories</a>
    <a href="#" class="flex p-2 font-medium text-gray-600 rounded-md hover:bg-gray-100 hover:text-black">Inventories</a>
    <a href="#" class="flex p-2 font-medium text-gray-600 rounded-md hover:bg-gray-100 hover:text-black">Brands</a>
  </div>
</li>

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