我遇到了一个相当微不足道(但很严重)的问题。我已经成功实现了一个功能,允许我通过自定义符号隐藏和扩展内容(由 HTML5 Doctor 提供),在本例中为“+”和“-”。
Here 我已经在 jsfiddle 中成功实现了这段代码的一个版本。以下是 CSS 的摘录:
summary:-webkit-details-marker {
color: 000;
display: none;
font-size: 125%;
margin-right: 2px;
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
height: 10px;
font-size: 20px;
overflow: hidden;
}
summary:after {
background: transparent;
border-radius: 5px;
content: "+";
color: #000;
float: left;
font-size: 1.5em;
font-weight: bold;
margin: -5px 10px 0 0;
padding: 0;
text-align: center;
width: 20px;
}
details[open] summary:after {
content: "-";
}
summary:focus {
outline-style: none;
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
}
article > details > summary {
color: transparent;
font-size: 18px;
margin-top: 16px;
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
}
details > paragraph {
margin-left: 24px;
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
}
details details {
margin-left: 36px;
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
}
details details summary {
font-size: 16px;
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
现在,我想要一个扩展/隐藏符号仅右对齐的版本。我试过了,但是 it fails to function as planned ,文本不仅过早显示,而且符号似乎无法执行任何操作。事实上,我的直觉是我做了一些非常愚蠢的事情,但具有讽刺意味的是,重新调整似乎是唯一有效的方法。
事不宜迟,这里是 jsfiddle 中 CSS 的摘录:
rsummary:-webkit-rdetails-marker {
color: 000;
display: none;
font-size: 125%;
margin-left: 2px;
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
height: 10px;
font-size: 20px;
overflow: hidden;
}
rsummary:after {
background: transparent;
border-radius: 5px;
content: "+";
color: #000;
float: right;
font-size: 1.5em;
font-weight: bold;
margin: -5px 10px 0 0;
padding: 0;
text-align: center;
width: 20px;
}
rdetails[open] rsummary:after {
content: "-";
float: right;
}
rsummary:focus {
outline-style: none;
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
}
rarticle > rdetails > rsummary {
color: transparent;
float: right;
font-size: 18px;
margin-top: 16px;
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
}
rdetails > rparagraph {
margin-right: 24px;
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
}
rdetails rdetails {
margin-right: 36px;
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
}
rdetails rdetails rsummary {
font-size: 16px;
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
因为我想要两个版本,其中一个标记漂浮在左侧(我已经有了并且可以正常工作,请参阅第一个 jsfiddle)和一个漂浮在右侧,因此正确的标记也必须起作用变得相关。
或者,如果有一种方法可以通过单击横幅本身来隐藏/展开文本,我将不胜感激,因为这是我真正希望它工作的方式,而不是使用 +/- 符号。显然,这意味着删除附加到图像的超链接,但这不是问题。
这几天一直困扰着我,所以我很感激我能得到的任何帮助。谢谢。
最佳答案
问题是您使用的标签在规范中不存在。标签 <details>
和 <summary>
是提供隐藏/展开行为的内容。您不能简单地重命名它们。此外,对附加到这些元素的行为的支持也很有限。具体来说,Chrome、Safari 和 Opera 提供支持,但 IE 或 Firefox 不支持 (http://caniuse.com/#search=details)。
我看到您使用了很多基于非标准的标签。例如:<paragraph>
和 <rparagraph>
而不是 <p>
标签。因此,您的结果将低于预期。
如果您希望在受支持的有限浏览器集上隐藏/展开详细信息和摘要标签的行为,您别无选择,只能使用受支持的标签。如果你想获得更好的支持,你可以使用 Javascript 或 jQuery 实现后备,比如这个:http://mathiasbynens.be/notes/html5-details-jquery .
关于css - 显示细节和摘要的问题以及重新对齐的 webkit 标记(包括 jsfiddle)、CSS3 和 HTML5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24105064/