Html TailwindCSS组内的链接:焦点元素因阻止单击事件而失败
我有一个FAQ部分,它有手风琴式的弹簧部分,都是用TailwindCSS(即没有Javascript)制作的。开放部分中的链接不起作用(它们只是在问题失去焦点时关闭FAQ) 有人知道如何在焦点丢失之前触发链接事件吗 这里有一个简单的例子来说明这个问题Html TailwindCSS组内的链接:焦点元素因阻止单击事件而失败,html,css,hyperlink,accordion,tailwind-css,Html,Css,Hyperlink,Accordion,Tailwind Css,我有一个FAQ部分,它有手风琴式的弹簧部分,都是用TailwindCSS(即没有Javascript)制作的。开放部分中的链接不起作用(它们只是在问题失去焦点时关闭FAQ) 有人知道如何在焦点丢失之前触发链接事件吗 这里有一个简单的例子来说明这个问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title
<!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>
(顺便说一句,我意识到svg箭头本身不起作用,但这是另一个问题……除了您的
组焦点:max-h-screen
之外,您还可以在:max-h-screen中添加焦点,以便在锚获得焦点时保持最大高度
要修复箭头动画,只需将CSS中的--transform rotate
替换为--tw rotate
.group:focus.group focus \:max-h-screen{
最大高度:100vh;
}
.组:焦点。组焦点\:文本白色{
--文本不透明度:1;
颜色:#02455a;
}
.group:focus.group focus\:-rotate-90{
--tw旋转:90度;
}
.聚焦范围\:最大屏幕:聚焦范围{
最大高度:100vh;
}
问题:
回答:
太棒了,谢谢!工作完美。
npx tailwindcss-cli@latest build -o tailwind.css