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

Question

我只是希望 HTML5详细信息标签的内容能够“滑动”/动画打开，而不是立即弹出打开/显示。这可以用 jQuery/Javascript 实现吗？

小提琴

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 过渡。

\n\n

因此，我建议包装该summary元素的同级元素，然后使用.slideToggle()它们。但这并不是那么简单，您需要将属性添加open到details，并默认隐藏内部包装元素。

\n\n

e.preventDefault()仅当您用于阻止默认功能时，这才有效；但是，您随后需要重写箭头指示符 ( \xe2\x96\xba, \xe2\x96\xbc)。

\n\n

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

\n\n

此处更新示例

\n\n

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

\n\n

CSS：

\n\n

summary::-webkit-details-marker {\n    display: none;\n}\nsummary:before {\n    content: "\xe2\x96\xba";\n}\ndetails.open summary:before {\n    content: "\xe2\x96\xbc";\n}\n

\n\n

如果您希望该details元素默认打开，请添加class="open"与属性相反的open，然后使用：$(\'details.open div#wrap\').css(\'display\',\'block\');

\n\n

替代示例- （默认打开）

\n