时间戳

首页 > 解决方案 > TailwindCSS 组内的链接：焦点元素失败，因为单击事件被阻止

html - TailwindCSS 组内的链接：焦点元素失败，因为单击事件被阻止

问题描述

我有一个FAQ 部分，其中有手风琴类型的弹出部分，都是用TailwindCSS 制作的（即没有Javascript）。打开部分内的链接不起作用（它们只是在问题失去焦点时关闭常见问题解答）。

有谁知道如何在失去焦点之前触发链接事件？

这是一个简单的最小示例演示该问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test TailwindCSS Group:Focus</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="tailwind.css" rel="stylesheet">
    <style>
        /* ----- ACCORDION ----- */
        .group:focus .group-focus\:max-h-screen {
            max-height: 100vh;
        }
        .group:focus .group-focus\:text-white {
            --text-opacity: 1;
            color: #02455a; /*petrol_blue*/
            color: rgba(255, 255, 255, var(--text-opacity));
        }

        .group:focus .group-focus\:-rotate-90 {
            --transform-rotate: -90deg;
        }
    </style>
</head>
<body>

<div class="group" tabindex="1">
    <div class="group flex justify-between px-4 py-2 items-center transition cursor-pointer pr-10 relative">
        <div class="h-8 w-8 items-center inline-flex justify-center rotate-180 transform transition group-focus:-rotate-90 absolute top-0 left-0 mb-auto ml-auto mt-2 mr-2">
            <svg fill="#02455a" height='100px' width='100px' xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 847 847" x="0px" y="0px">
                <g><polygon points="670,584 423,263 176,584 "></polygon></g></svg>
        </div>
        <div class="transition pl-4  hover:opacity-50">Question</div>
    </div>
    <div class="group-focus:max-h-screen max-h-0 px-4 overflow-hidden">
        <p class="pl-4 pr-4 pt-0 pb-2">Answer: <a href="https://stackoverflow.com">Stack Overflow</a></p>
    </div>
</div>


</body>
</html>

tailwind.css正在使用：

npx tailwindcss-cli@latest build -o tailwind.css

（顺便说一句，我意识到 svg 箭头本身并没有表现出来，但这是另一个问题......）

标签： htmlcsshyperlinkaccordiontailwind-css

解决方案

除了您之外，您group-focus:max-h-screen还可以添加focus-within:max-h-screen以便在锚获得焦点时保持最大高度。

要修复您的箭头动画，只需在您的 CSS 中替换--transform-rotate为。--tw-rotate

.group:focus .group-focus\:max-h-screen {
  max-height: 100vh;
}

.group:focus .group-focus\:text-white {
  --text-opacity: 1;
  color: #02455a;
}

.group:focus .group-focus\:-rotate-90 {
  --tw-rotate: 90deg;
}

.focus-within\:max-h-screen:focus-within {
  max-height: 100vh;
}
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="group" tabindex="1">
  <div class="group flex justify-between px-4 py-2 items-center transition cursor-pointer pr-10 relative">
    <div class="h-8 w-8 items-center inline-flex justify-center rotate-180 transform transition group-focus:-rotate-90 absolute top-0 left-0 mb-auto ml-auto mt-2 mr-2">
      <svg fill="#02455a" height="100px" width="100px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 847 847" x="0px" y="0px">
        <g><polygon points="670,584 423,263 176,584 "></polygon></g>
      </svg>
    </div>
    <div class="transition pl-4 hover:opacity-50">Question</div>
  </div>
  <div class="group-focus:max-h-screen focus-within:max-h-screen max-h-0 px-4 overflow-hidden">
    <p class="pl-4 pr-4 pt-0 pb-2">Answer: <a href="https://stackoverflow.com">Stack Overflow</a></p>
  </div>
</div>

推荐阅读