与 div 中的项目交互时保持 div 可见

Question

只要输入焦点时链接正确显示，此功能就有效。有没有办法让我在单击链接时保持

visible

状态？此时，焦点立即改变，因此 div 消失了。

<div class="group p-8">
  <input type="text" class="peer bg-white w-full px-4 py-2 border-2 border-gray-200">
  <div class="group-focus-within:visible invisible relative">
    <ul class="max-h-40 w-full absolute z-50 bg-gray-50 border-2 border-gray-200 rounded divide-y-2 divide-gray-100 overflow-y-scroll shadow-lg px-4 py-2 -mt-px">
      <li class="py-2">
        <a href="#">Link 1</a>
      </li>
      <li class="py-2">
        <a href="#">Link 2</a>
      </li>
      <li class="py-2">
        <a href="#">Link 3</a>
      </li>
      <li class="py-2">
        <a href="#">Link 4</a>
      </li>
      <li class="py-2">
        <a href="#">Link 5</a>
      </li>
    </ul>
  </div>
</div>

在这里播放：https://play.tailwindcss.com/S7kFqSe9wF

Answer 1

您可以通过使包含链接的 div 在单击其任何子链接时保持可见来实现此目的。

1. 向父 div 添加

   tabindex

   ：这使得 div 可聚焦，使其在单击子元素时保持焦点。
2. 在父 div 上使用

   :focus-within

   ：这将确保只要其任何子元素获得焦点，该 div 就保持可见。

https://play.tailwindcss.com/BE52iMzLj1