HTML中的details元素

最新推荐文章于 2024-10-14 14:37:28 发布

justforuse

最新推荐文章于 2024-10-14 14:37:28 发布

阅读量1.2k

点赞数

分类专栏： html/css 文章标签： details

本文链接：https://blog.csdn.net/u014291497/article/details/80042850

版权

html/css 专栏收录该内容

75 篇文章

订阅专栏

本文介绍HTML中的details元素，该元素可以创建一个默认关闭的可折叠面板。通过summary子元素定义标题，点击标题可展开或收起详细内容。此外，还可以使用open属性控制面板的初始状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML提供了一种手风琴式效果显示内容总结与内容的元素：details
如果内部没有summary则默认显示Details
可以为details添加open属性设置默认开关状态

<body>
    <details>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga, sit.
    </details>
    <details open>
        <summary>Lorem, ipsum dolor.</summary>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </details>
</body>