制作< details>的内容使用jQuery / JS打开时标记动画 [英] Make the contents of a <details> tag animate when open with jQuery/JS

问题描述

我只是希望HTML5 详细信息标记的内容为'滑动'/动画打开，而不是立即弹出/立即显示。这可以用jQuery / Javascript吗？

I simply want the contents of the HTML5 details tag to 'glide'/animate open rather than just pop open/appear instantly. Is this possible with 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>

推荐答案

太糟糕了，简单的CSS转换无法使用。

Too bad a simple CSS transition can't be used.

因此，我建议包装摘要元素的兄弟元素，然后使用 .slideToggle（） 。不是那么简单，你需要将 open 属性添加到详细信息，并隐藏内部包装元素默认情况下。

I'd therefore suggest wrapping the sibling elements of the summary element and then using .slideToggle() on them. It isn't that simple though, you need to add the open attribute to details, and hide the inner wrapped elements by default.

这仅适用于使用 e.preventDefault（）来阻止默认功能的情况。但是，您需要重写箭头指示符（►，▼）。

This only works if you use e.preventDefault() to prevent the default functionality; however, you then need to rewrite the arrow indicators, (►,▼).

您可以使用 summary :: - webkit-details-marker 和 display：none 删除不再有效的标记，并通过：在 / 之前添加自己的自定义标记：在之后元素。

You would use summary::-webkit-details-marker and display:none to remove the marker that is no longer working, and add your own custom markers via the :before/:after pseudo elements.

此处更新示例

$('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: "▼";
}

如果你想要详情默认情况下要打开的元素，添加 class =open而不是属性 open ，然后使用这个： $（'details.open div＃wrap'）。css（'display'，'block'）;

If you want the details element to be open by default, add class="open" as opposed to the attribute open, and then use this: $('details.open div#wrap').css('display','block');

替代示例 - （默认情况下已开启）

ALTERNATIVE EXAMPLE - (open by default)

这篇关于制作< details>的内容使用jQuery / JS打开时标记动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！