Question

我使用详细信息和摘要标签制作了一个手风琴。我添加了一些 javascript，用于在打开另一个项目时关闭一个项目。内容淡入。这看起来很不错。现在我想添加一些动画，以便项目打开得更慢。使用 DIV 时有很多关于此的信息。不过，我更喜欢内置的 HTML 标签，因为作者可以更轻松地编辑这种类型的手风琴，不会弄乱所有内容。

HTML

<details>
<summary>Test<em> Lorem ipsum dolor sit amet</em></summary>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing </p>
</details>
<details>
<summary>Test<em> Lorem ipsum dolor</em></summary>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing</p>
</details>

CSS

summary {
    background: #DEEBF6;
    padding: 15px;
    border: 1px solid #ccc;
    cursor: pointer;
    list-style: none;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 16px;
    color: #444444;
    transition: all 0.5s ease;
}

summary:hover {
    background: #cfe1f1;
    cursor: pointer;
}
details p {
    padding: 15px;
}
details[open] {
    margin-bottom: 20px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
details[open] summary {
    border-right: none;
    border-left: none;
}
summary::-webkit-details-marker {
   display: none;
}
summary::before {
    margin-right: 10px;
    padding-right: 0;
    content: '\27A5';
    transform: rotate(90deg);
    display: inline-block;
    background: #4d4d4d;
    padding: 5px;
    color: #cfe1f1;
}
summary:hover::before {
    color: #cfe1f1;
}
details[open] summary::before {
    content: '\27A6';
    transform:rotate(-90deg);
}
details[open] summary ~ * {
  animation: sweep .8s ease-in-out;
}
summary em {
    display: block;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    margin-top: 5px;
    font-family: Helvetica,arial,sans-serif;
}
@keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}

JS

$("details").click(function(event) {
  $("details").not(this).removeAttr("open");
});

您可以在 Codepen 上查看工作示例：

Example of accordion on Codepen

使用摘要和详细信息标签的手风琴 - 如何缓慢打开

0 个答案: