【已解决】纯 HTML5 的文字多级下拉展开功能（只要最少的CSS）

yq-ysy · #1

想实现纯 HTML5 的文字多级下拉展开功能，用于归纳整理一些十几万字的文字资料，按章节条目一层一层分级显示。

在网上搜索了一通，大多是使用 CSS、jQuery、Bootstrap 之类的来实现，感觉太复杂了，
而且我十几万字的资料，用这方法编辑不方便，也担心过几年这些技术过时了，浏览器不支持了，那又要再编辑一遍就太麻烦了。

理论上，如果原代码能像下面这个 HTML5 的“摘要”这样就好了，点击就展开，再点击就收起来，我源代码编辑起来也方便。
可惜这个“摘要”不能多级嵌套？或者我不知道嵌套的方法？

代码：全选

<html>
<body>

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

</body>
</html>

或者有没有其它方法可以实现类似的功能，例如用 HTML5 表格，点击就显示或收起/隐藏？
有知晓解决方法的朋友，还望指教。

【解决方法见四楼】

astolia · #2

CSS本就是HTML5技术集的一个重要组成部分，或者你理解的HTML5就只是那些新增的标签？

而且也没搞懂你到底要搞成什么效果，纯用details和summary就这样

代码：全选

<details>
    <summary>A</summary>
    <details>
        <summary>B</summary>
        <p>BBBBB</p>
    </details>
    <details>
        <summary>C</summary>
        <p>CCCCC</p>
    </details>
</details>

还要更多的效果，即使是简单的层次缩进，css都跑不掉的，如果涉及到复杂的状态变化还要引入js

yq-ysy · #3

astolia 写了： ↑2020-12-24 14:23 CSS本就是HTML5技术集的一个重要组成部分，或者你理解的HTML5就只是那些新增的标签？
而且也没搞懂你到底要搞成什么效果，纯用details和summary就这样……
还要更复杂的效果，css+js跑不掉的

哦，原来是这样分段包含，谢谢指导。
现在还有一个问题：它下一层没有缩进，看不出哪一层属于哪一层，不直观。
网上又查找了一下，找到一个最简单的CSS，可以实现。

代码：全选

<html>

<style type="text/css">
part-1 {direction: ltr; padding-left: 50px;}
</style>

<body>

<details>
    <summary>A</summary>
    其它文字不缩进</p>
    
    <details>
        <summary>B，摘要不缩进</summary>
        <part-1>BBBBB，整段缩进50px</part-1></br>
        <part-1><part-1>BBBBB，整段缩进100px</part-1></part-1>
    </details>
    </p>
       
    <details>
        <summary><part-1>C，摘要仅文字整段缩进50px，但不知为何显得缩进多了一点</part-1></summary>
        <part-1>CCCCC，整段缩进50px</part-1></br>
        <part-1><part-1>CCCCC，整段缩进100px</part-1></part-1>
    </details>
</details>

</body>
</html>

唯一不足的是，放在摘要外无效，放在摘要里摘要的文字可以缩进，但左边的这个小三角形不能跟随缩进。
还过问题也不大，因为点击文字就能展开收起，对我来说够用了。

astolia · #4

yq-ysy 写了： ↑2020-12-24 15:01 唯一不足的是，放在摘要外无效，放在摘要里摘要的文字可以缩进，但左边的这个小三角形不能跟随缩进。
还过问题也不大，因为点击文字就能展开收起，对我来说够用了。

代码：全选

<html>
<head>
<style>
    details, p {
        margin-left: 1em;
    }
</style>
</head>
<body>
<details>
    <summary>A</summary>
    AAAA
    <details>
        <summary>B</summary>
        <p>BBBBB</p>
    </details>
    <details>
        <details>
            <summary>C</summary>
            <p>CCCCC</p>
        </details>
        <details>
            <summary>D</summary>
            <p>DDDDD</p>
        </details>
    </details>
</details>
</body>
</html>

yq-ysy · #5

astolia 写了： ↑2020-12-24 16:54
yq-ysy 写了： ↑2020-12-24 15:01 唯一不足的是，放在摘要外无效，放在摘要里摘要的文字可以缩进，但左边的这个小三角形不能跟随缩进。
还过问题也不大，因为点击文字就能展开收起，对我来说够用了。
代码：全选
<html>
<head>
<style>
    details, p {
        margin-left: 1em;
    }
</style>
</head>
<body>
<details>
    <summary>A</summary>
    AAAA
    <details>
        <summary>B</summary>
        <p>BBBBB</p>
    </details>
    <details>
        <details>
            <summary>C</summary>
            <p>CCCCC</p>
        </details>
        <details>
            <summary>D</summary>
            <p>DDDDD</p>
        </details>
    </details>
</details>
</body>
</html>

十分感谢！
你这方法更简单，源代码也比我之前的更精简，方便我处理文字。
谢谢！

【已解决】纯 HTML5 的文字多级下拉展开功能（只要最少的CSS）

【已解决】纯 HTML5 的文字多级下拉展开功能（只要最少的CSS）

Re: 【求助】纯 HTML5 的文字多级下拉展开功能（不要CSS和插件）

Re: 【求助】纯 HTML5 的文字多级下拉展开功能（不要CSS和插件）

Re: 【求助】纯 HTML5 的文字多级下拉展开功能（不要CSS和插件）

Re: 【已解决】纯 HTML5 的文字多级下拉展开功能（只要最少的CSS）