1. 首页
  2. css

CSS探索细节和摘要元素可以做什么

我们之前提到过和元素有多伟大。它们非常适合快速制作手风琴,便于触摸、鼠标和键盘输入://codepen.io/anon/embed/jzmjPJ?height=250&theme id=1&slug hash=>CodePen Embed Fallback
和甚至可以用来播放/暂停GIF!单击此图像右上角的\”暂停\”按钮以查看它的操作:CodePen嵌入回退
整洁,是吗?但这些元素还能做什么呢?很长一段时间以来,我只把details当作制作手风琴的一种方法。但前几天我开始想一想,我意识到的第一件事是也许我们可以用它们做更好的脚注//codepen.io/anon/embed/f7948ea36e02a0af7ea548e423792671?height=450&theme id=1&slug hash=>CodePen Embed Fallback
单击段落中的链接会将您推到脚注描述所在的页面底部。我们通过前后链接元素的ID来实现。但是!有一些jQuery插件,比如BigFoot,可以让您内联脚注。
这里是应用了BigFoot脚本和jQuery的相同示例:CodePen嵌入回退
?BigFoot接受我们的可访问标记,删除所有链接内容,并将其作为一个小按钮和工具提示进行内联处理。
但是如果我们可以使用和来替换jQuery和纯ol\”HTML作为脚注呢?很遗憾,我们不能这样做。如果您试图将这些元素中的任何一个放置在标记中,浏览器会将这些元素呈现在元素之外:CodePen嵌入回退
Blah!这很烦人,但我有点明白为什么会这样。如果我们能取代所有这些链接的复杂性和页面上下跳跃的糟糕体验,那就太好了。但是我们做不到。好吧,如果我们做不到,那么我们还能用和做什么呢?这让我想…工具提示呢?嗯,是的!我们绝对可以做到。假设我们有这样的标记来扩展显示的日期:CodePen嵌入回退
非常标准,我们以前见过这种情况。但现在让我们来谈谈造型,这是有趣的一点。首先,我们需要处理元素:
details {border-radius: 3px;cursor: pointer;display: inline-block;position: relative;transition: 0.15s background linear;}details:hover,details:focus {background: #d4d1ec;}
这让我们可以绝对地将信息定位在我们的details元素中,但它也让工具提示感觉更像是一个点击背景的按钮。接下来,我们可以撤销summary元素的默认箭头:
summary {background: url(\”https://assets.codepen.io/14179/Info.svg\”) 11px 11.5px no-repeat;list-style: none;padding: 10px;padding-left: 33px;}
,最后,我们需要绝对定位details元素中的段落。然后做一个小三角形,指向工具提示的其余部分:
details p {cursor: auto;background: #eee;padding: 15px;width: 250px;position: absolute;left: 0;top: 35px;border-radius: 4px;right: 0;}// Tiny triangle that points updetails p:before {content: \”\”;border-bottom: 12px solid #eee;border-left: 8px solid transparent;border-right: 8px solid transparent;height: 0;left: 10px;position: absolute;top: -10px;width: 0;}
,这会导致类似的结果。确保单击工具提示以查看其下方显示的说明:CodePen Embed Fallback
在这里我们可以做的一件好事是在工具提示打开时添加一个动画:
details[open] p {animation: animateDown 0.2s linear forwards;}@keyframes animateDown {0% {opacity: 0;transform: translatey(-15px);}100% {opacity: 1;transform: translatey(0);}}
!如果您单击工具提示,它会弹出窗口,如果您单击制表符并单击空格,它也会打开。
但是我们可以进一步了解它。我们可能不想看到的是一堆工具提示到处都是。如果我们大量使用工具提示,那么这可能会变得非常笨拙和视觉上分散注意力。我们需要做的是在工具提示外单击时关闭它。我们可以用一些简单的JavaScript来实现这一点:
const = tooltip.contains(e.target);if (!insideTooltip) {tooltip.removeAttribute(\”open\”);}});
现在,当您单击工具提示时,它将关闭它。尼托!CodePen Embed Fallback
和元素不能做所有的事情,但它们肯定可以做很多方便的事情——我认为这种元素组合可以做的更多。我们得去找他们。事实上,这里有一些关于这个主题的更棒的帖子。文章在2020年2月14日创建一个打开但从不关闭的细节元素细节/摘要脚注工具提示

CSS探索细节和摘要元素可以做什么 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%8e%a2%e7%b4%a2%e7%bb%86%e8%8a%82%e5%92%8c%e6%91%98%e8%a6%81%e5%85%83%e7%b4%a0%e5%8f%af%e4%bb%a5%e5%81%9a%e4%bb%80%e4%b9%88/