Question

我遇到了一个相当微不足道（但很严重）的问题。我已经成功实现了一个功能，允许我通过自定义符号隐藏和扩展内容（由HTML5 Doctor提供），在这种情况下是＆＃34; +＆＃34;和＆＃34; - ＆＃34;。

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）和一个浮动到右边的标记，正确的一个标记也必须起作用。

或者，如果有办法通过单击横幅本身隐藏/扩展文本，我将不胜感激，因为这是我真正希望它工作的方式，而不是使用+/-符号。显然这意味着删除附加到图像的超链接，但这不会成为问题。

这一直困扰着我几天，所以我感谢任何帮助。感谢。

Answer 1

问题是您使用的是不符合规格的标签。标签 <details> 和 <summary> 是提供隐藏/展开行为的标签。你不能简单地重命名它们。此外，对这些元素附带的行为的支持有限。具体来说，Chrome，Safari和Opera都支持，但IE或Firefox（http://caniuse.com/#search=details）都没有。

我发现你使用了很多非基于标准的标签。例如：<paragraph>和<rparagraph>而不是<p>标记。因此，您的结果将低于可预测性。

如果您希望在受支持的有限浏览器集上隐藏/展开详细信息和摘要标记，则您别无选择，只能使用支持的标记。如果您想获得更多支持，可以使用Javascript或jQuery实现回退，例如：http://mathiasbynens.be/notes/html5-details-jquery。

Answer 2

Crossbrowser使用细节和摘要

在前几天，我需要使用详细信息和摘要标记执行一些实现;突然间，我发现浏览器之间存在兼容性问题，因此在不同网站上追踪了几个帖子，有些人感到困惑。所以我给这个网站带来了我的结论。

1.总部设在Nicolas Gallagher的git.io/normalize，查看CSS中的详细信息和摘要标记：

details, summary { display: block; }

2。为此标记配置CSS sample in JSFIDDLE
3.在HTML中，您需要记住所有详细信息CHILDRENS 需要位于HTML标记内 p ， a ， div < / strong>或其他; HTML标记的文字将在关闭状态下的非webkit浏览器上显示。
4.在JQuery中，您需要一个小代码来切换状态sample in JSFIDDLE

注意：这是一个低权重的实现，具有良好的响应;让我知道你的意见。

在JSFIDDLE上测试包含代码评论

显示详细信息和摘要以及重新对齐的webkit标记（包括jsfiddle），CSS3和HTML5的问题

2 个答案:

Crossbrowser使用细节和摘要