javascript - 使用 jQuery/JS 打开时，使 <details> 标签的内容具有动画效果

Question

我只是想让 HTML5 details 标签的内容“滑动”/动画打开，而不是立即弹出/显示。这可以用 jQuery/Javascript 实现吗？

Fiddle

HTML:

<details>
<summary>Show/Hide</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet metus auctor tempor dignissim. Nunc tempor ligula malesuada, adipiscing justo quis, ultrices libero. Curabitur pretium odio sagittis lorem euismod, a ultrices sem ultrices. Integer sapien nibh, mollis id pretium id, dignissim ut dui. Nam sit amet lectus lectus. Cras scelerisque risus a dui accumsan, in dignissim dolor sodales. Nunc aliquam pharetra dui, a consectetur velit lobortis vel.</p>
<p>Mauris convallis orci in semper aliquam. Ut mollis laoreet nibh pretium tincidunt. Donec aliquam at odio sit amet dictum. Phasellus sapien leo, feugiat sit amet sagittis in, congue vel lectus. Donec elementum est vitae nulla interdum laoreet. Curabitur fringilla a tellus non laoreet. Aliquam vel lectus convallis massa pulvinar pellentesque. Mauris laoreet pharetra turpis vel tristique. Sed ligula ligula, sodales sed auctor in, aliquam sit amet lorem. Etiam vestibulum, libero vel dignissim ultrices, lacus mauris lacinia enim, quis aliquam nibh mauris eu mauris. Etiam sapien leo, dapibus et libero sed, laoreet ornare tellus.</p>
<p>Sed placerat vehicula magna et adipiscing. Nam euismod nibh ut tellus tempor, eget lobortis metus iaculis. In laoreet, enim in dignissim pellentesque, felis augue tincidunt massa, vestibulum fringilla mauris sapien in diam. Duis interdum molestie fermentum. Aenean dictum varius augue, id luctus neque viverra id. Nam eleifend tempus mauris in mattis. Sed id risus non magna semper blandit in vel arcu. Suspendisse quis nisi ligula. Fusce vestibulum at enim eu.</p>
</details>

Answer 1

太糟糕了，无法使用简单的 CSS 过渡。

因此我建议包装 summary 元素的兄弟元素，然后使用 .slideToggle()在他们。不过没那么简单，需要在details中添加open属性，默认隐藏内层包裹的元素。

这仅在您使用 e.preventDefault() 来阻止默认功能时有效；但是，您随后需要重写箭头指示符 (►,▼)。

您将使用 summary::-webkit-details-marker 和 display:none 删除不再有效的标记，并通过添加您自己的自定义标记:before/:after 伪元素。

UPDATED EXAMPLE HERE

$('details summary').each(function(){
    $(this).nextAll().wrapAll('<div id="wrap"></div>');
});
$('details').attr('open','').find('#wrap').css('display','none');
$('details summary').click(function(e) {
    e.preventDefault();
    $(this).siblings('div#wrap').slideToggle(function(){
        $(this).parent('details').toggleClass('open');
    });
});

CSS:

summary::-webkit-details-marker {
    display: none;
}
summary:before {
    content: "►";
}
details.open summary:before {
    content: "▼";
}

如果您希望 details 元素默认打开，请添加 class="open" 而不是 open 属性，并且然后使用这个:$('details.open div#wrap').css('display','block');

ALTERNATIVE EXAMPLE - (默认打开)