利用HTML5，无JS实现各种交互效果_利用html5,无js实现各种交互效果-CSDN博客

本文链接：https://blog.csdn.net/llll789789/article/details/96181354

本文详述如何利用HTML5的details和summary元素实现各种交互效果，包括展开与收起、自定义UI、处理浏览器体验问题，以及各种无JS实现的交互案例，如 accordian、悬浮菜单等，并探讨兼容性和无障碍访问。

摘要由CSDN通过智能技术生成

本文利用的是HTML5 details, summary

首先

一、了解HTML5 details, summary默认交互行为

<details>标签在Chrome，Firefox等浏览器下默认是有展开收起行为的，例如下面HTML：

<details>

    <summary>这是摘要1</summary>

    <p>这里具体描述，标签相对随意，例如这里使用的&lt;p&gt;标签。</p>

</details>

结果UI表现为：

details标签默认效果截图

具体描述为：

只显示了<summary>标签内容，而<p>默认隐藏了；
<summary>标签前面出现了一个小三角；

小三角图形的隐喻是：我是可点击的，点击我可能会出现宝箱。

OK，我们不妨就点击一下，结果如下图：

具体描述为：

原本隐藏的<p>标签显示出来了；
<summary>标签前面的小三角方向朝下了；

此时我们再一次点击，<p>标签内容又会隐藏收起，箭头方向还原，如下图：

活脱脱一个天然的展开收起效果。

展开与收起是通过open属性控制的

通过在<details>标签上添加布尔类型的open属性，可以让我们的详情信息默认就是展开状态，如下HTML示意：

<details open>
    <summary>这是摘要2</summary>
    <content>这里&lt;details&gt;标签设置了HTML布尔属性open，因此，默认是展开状态。</content>
</details>

结果如下截图：

open属性下的信息默认展开

如果我们使用JS脚本手动移除这个open属性，即使没有点击行为的发生，我们内容也会收起。

如果缺省

<summary>标签如果缺省，则<details>元素会在内部自动创建一个<summary>内容，默认的文案是“详细信息”。如下HTML代码：

<details open>
    <p>如果&lt;summary&gt;缺省，则会自动补上，文案是“详细信息”。</p>
</details>

结果如下截图所示：

summary 详细信息占位示意图

二、details浏览器内置UI可以自定义

标签默认的小三角样式有些简陋，在实际应用的时候，往往不是我们希望的样子，不要担心，我们是可以对其进行自定义的。在Chrome等浏览器下使用::-webkit-details-marker，在Firefox浏览器下使用::-moz-list-bullet可以对小三角进行UI控制，例如改变颜色，改变大小，使用自定义的图形代替，或者直接隐藏等，我们来看几个简单的案例。

案例1：小三角右侧显示同时颜色变淡

HTML代码如下：

<details class="details-1" open>
    <summary>这是示例1</summary>
    <content>本案例展示对小三角UI重定义：包括显示在右侧，颜色减淡等。</content>
</details>

CSS如下：

.details-1 summary {
    width: -moz-fit-content;
    width: fit-content;
    direction: rtl;
}
.details-1 ::-webkit-details-marker {
    direction: ltr;
    color: gray;
    margin-left: .5ch;
}
.details-1 ::-moz-list-bullet {
    direction: ltr;
    color: gray;
    margin-left: .5ch;
}
web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路

结果如下图所示：