如何将Tailwind CSS hover触发的子菜单改为点击事件触发？

完全可以实现，以下分别提供仅用Tailwind CSS和配合JavaScript的两种实现方案： #

方案1：仅使用Tailwind CSS实现 #

无需编写JavaScript，利用原生checkbox的选中状态配合Tailwind的peer关联类即可实现切换效果，代码如下：

<div>
  <!-- 隐藏的单选框作为状态存储 -->
  <input type="checkbox" id="admission-toggle" class="peer hidden">
  <!-- 点击触发的文字用label关联单选框 -->
  <label for="admission-toggle" class="font-bold text-gray-700 cursor-pointer">Admission</label>
  <!-- 子菜单用peer-checked状态控制显示 -->
  <div class="hidden peer-checked:block bg-white w-auto">
    <div class="p-3 hover:bg-gray-200">
      Admission Process
    </div>
    <div class="p-3 hover:bg-gray-200">
      option 1
    </div>
    <div class="p-3 hover:bg-gray-200">
      option 2
    </div>
  </div>
</div>

该方案优势是代码精简无额外JS，劣势是仅支持点击触发按钮切换状态，若需要点击页面空白处关闭菜单等进阶交互，还是需要配合JS实现。 #

方案2：配合少量JavaScript实现（生产环境更推荐） #

灵活度更高，可以实现点击空白关闭、同时仅展开一个菜单等进阶交互，代码如下：

HTML 改造 #

<div class="dropdown-wrapper">
  <span class="font-bold text-gray-700 cursor-pointer" data-dropdown-trigger>Admission</span>
  <div class="hidden bg-white w-auto" data-dropdown-content>
    <div class="p-3 hover:bg-gray-200">
      Admission Process
    </div>
    <div class="p-3 hover:bg-gray-200">
      option 1
    </div>
    <div class="p-3 hover:bg-gray-200">
      option 2
    </div>
  </div>
</div>

JavaScript 逻辑 #

// 绑定触发按钮点击事件
document.querySelectorAll('[data-dropdown-trigger]').forEach(trigger => {
  trigger.addEventListener('click', e => {
    e.stopPropagation();
    // 切换对应子菜单的显示状态
    trigger.nextElementSibling.classList.toggle('hidden');
  });
});
// 点击页面其他位置关闭所有已展开的菜单
document.addEventListener('click', () => {
  document.querySelectorAll('[data-dropdown-content]').forEach(content => {
    content.classList.add('hidden');
  });
});

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