HTML 实现可折叠部分的代码

Question

I have a popup.html file which presents the user with a slew of checkboxes.我有一个 popup.html 文件，它向用户展示了大量的复选框。 There are major sections that I would like to create expand/collapse sections.我想创建一些主要部分展开/折叠部分。 I am a neophyte web developer who knows enough to be dangerous.我是一个新手 web 开发人员，他知道足够危险。 I have spent the better part of the past 10 hours trying to modify my code to address this issue.在过去的 10 个小时中，我花了大部分时间试图修改我的代码来解决这个问题。 I have failed.我失败了。 I would love some help.我会喜欢一些帮助。

Here is my current code:这是我当前的代码：

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    div.top {
      width: 250px;
    }
    div.indent {
      margin-left: 20px;
    }
  </style>
</head>
<body>
<p>Select Games / Expansions / Assets:</p>
<div class="top">
  <div>
    <input type="checkbox" id="g1" value="g1">
    <label for="g1">G1</label><br>
    <div class="indent">
      <input type="checkbox" id="g1-oc" value="g1-oc">
      <label for="g1-oc">G1 OC</label><br>
      <div class="indent">
        <input type="checkbox" id="g1-oc-x1" value="g1-oc-x1">
        <label for="g1-oc-x1">G1 OC X1</label><br>
        <div class="indent">
          <input type="checkbox" id="g1-oc-x1-a1" value="g1-oc-x1-a1">
          <label for="g1-oc-x1-a1">G1 OC X1 A1</label><br>
        </div>
        <div class="indent">
          <input type="checkbox" id="g1-oc-x1-a2" value="g1-oc-x1-a2">
          <label for="g1-oc-x1-a2">G1 OC X1 A2</label><br>
        </div>
      </div>
      <div class="indent">
        <input type="checkbox" id="g1-oc-x2" value="g1-oc-x2">
        <label for="g1-oc-x2">G1 OC X2</label><br>
        <div class="indent">
          <input type="checkbox" id="g1-oc-x2-a1" value="g1-oc-x2-a1">
          <label for="g1-oc-x2-a1">G1 OC X2 A1</label><br>
        </div>
        <div class="indent">
          <input type="checkbox" id="g1-oc-x2-a2" value="g1-oc-x2-a2">
          <label for="g1-oc-x2-a2">G1 OC X2 A2</label><br>
        </div>
      </div>
    </div>
    <div class="indent">
      <input type="checkbox" id="g1-uc" value="g1-uc">
      <label for="g1-uc">G1 UC</label><br>
      <div class="indent">
        <div>
          <input type="checkbox" id="g1-uc-x1" value="g1-uc-x1">
          <label for="g1-uc-x1">G1 UC X1</label><br>
          <div class="indent">
            <input type="checkbox" id="g1-uc-x1-a1" value="g1-uc-x1-a1">
            <label for="g1-uc-x1-a1">G1 UC X1 A1</label><br>
          </div>
          <div class="indent">
            <input type="checkbox" id="g1-uc-x1-a2" value="g1-us-c1-a2">
            <label for="g1-us-c1-a2">G1 UC X1 A2</label><br>
          </div>
        </div>
        <div>
          <input type="checkbox" id="g1-uc-x2" value="g1-uc-x2">
          <label for="g1-uc-x2">G1 UC X2</label><br>
          <div class="indent">
            <input type="checkbox" id="g1-uc-x2-a1" value="g1-uc-x2-a1">
            <label for="g1-uc-x2-a1">G1 UC X2 A1</label><br>
          </div>
          <div class="indent">
            <input type="checkbox" id="g1-uc-x2-a2" value="g1-uc-x2-a2">
            <label for="g1-uc-x2-a2">G1 UC X2 A2</label><br>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="popup.js"></script>
</body>
</html>

This code results in the following:此代码产生以下结果：

Select Games / Expansions / Assets:

[ ] G1
    [ ] G1 OC
        [ ] G1 OC X1
            [ ] G1 OC X1 A1
            [ ] G1 OC X1 A2
        [ ] G1 OC X2
            [ ] G1 OC X2 A1
            [ ] G1 OC X2 A2
    [ ] G1 UC
        [ ] G1 UC X1
            [ ] G1 UC X1 A1
            [ ] G1 UC X1 A2
        [ ] G1 UC X2
            [ ] G1 UC X2 A1
            [ ] G1 UC X2 A2

What I am trying to accomplish is have the code which will present the user collapsed sections as follows:我想要完成的是拥有将向用户显示折叠部分的代码，如下所示：

[ ] G1

When the user expands G1, they would see:当用户展开 G1 时，他们会看到：

[ ] G1
    [ ] G1 OC
    [ ] G1 UC

If the user would expand G1 OC, they would see如果用户展开 G1 OC，他们会看到

[ ] G1
    [ ] G1 OC
        [ ] G1 OC X1
        [ ] G1 OC X2

If the user would expand G1 OC X1 they would see如果用户展开 G1 OC X1 他们会看到

[ ] G1
    [ ] G1 OC
        [ ] G1 OC X1
            [ ] G1 OC X1 A1
            [ ] G1 OC X1 A2

And so on.等等。 Obviously, the functionality would have to expand and collapse the sections.显然，该功能必须展开和折叠这些部分。 For now, I don't need a fancy caret, arrow, etc. I could live with a simple "+" and "-" in front of each checkbox.现在，我不需要花哨的插入符、箭头等。我可以接受每个复选框前面的简单“+”和“-”。

Ideally, the code would be self-contained without referencing outside resources.理想情况下，代码应该是自包含的，无需引用外部资源。

I would appreciate any help I could get.如果能得到任何帮助，我将不胜感激。 Hell, if someone could simply make one of the expansions/collapses to work, I am sure I could then modify the rest of the code to work in a similar fashion.地狱，如果有人可以简单地使扩展/折叠之一工作，我相信我可以修改代码的 rest 以类似的方式工作。 Thanks in advance for any help provided.在此先感谢您提供的任何帮助。

Answer 1

@any2cards It sounds like you're looking for the <details> element . @any2cards 听起来您正在寻找<details>元素。 Supported by all major browsers and requires no extra code.所有主要浏览器都支持，不需要额外的代码。

<details>
  <summary>This content is visible at all times</summary>
  <p>This content is only visible when expanded</p>
</details>

Answer 2

made a REPL (interactive code thingymajig) where you can try the solution I'm going to explain to you here (commented as well): https://replit.com/@heyitsmarcus/Collapsing-Entries-CSS制作了一个 REPL（交互式代码 thingymajig），您可以在其中尝试我将在此处向您解释的解决方案（也有评论）： https://replit.com/@heyitsmarcus/Collapsing-Entries-CSS

First, I did have to replace the "UC" structure with the "OC" in what you copied and pasted because the "UC" structuring was broken.首先，我确实必须在您复制和粘贴的内容中用“OC”替换“UC”结构，因为“UC”结构已损坏。 It still says UC because I just replaced OC references with UC.它仍然说 UC，因为我只是用 UC 替换了 OC 引用。

One thing I added to the HTML was the class expando-controller to each checkbox that is responsible for expanding elements.我添加到 HTML 的一件事是 class expando-controller 到负责扩展元素的每个复选框。 I chose expando-controller because I liked it but you can choose whatever you like (just change the HTML classes and the associated CSS file) The reason why I added this class was so that every checkbox had a common functionality that I can latch onto with JavaScript. Classes are powerful and, if utilized correctly, are one of the finest bits of HTML, CSS, and JavaScript.我选择 expando-controller 是因为我喜欢它，但你可以选择任何你喜欢的东西（只需更改 HTML 类和相关的 CSS 文件）我添加这个 class 的原因是每个复选框都有一个共同的功能，我可以使用JavaScript。类非常强大，如果使用得当，它们是 HTML、CSS 和 JavaScript 中最好的部分之一。

Oh, and I swapped out the attribute with a link to a CSS stylesheet.哦，我用指向 CSS 样式表的链接替换了属性。 Try to avoid using those as you'll get some weird funkiness if you start using a blend of stylesheets and internal tags.尽量避免使用它们，因为如果您开始使用样式表和内部标签的混合，您会得到一些奇怪的乐趣。 Best to avoid them if you can.如果可以，最好避开它们。

So, originally, I did this in JavaScript and posted a working but rather complicated answer...and deleted it.所以，最初，我在 JavaScript 中这样做并发布了一个有效但相当复杂的答案......并将其删除。 If you want to see that version, it is here: https://replit.com/@heyitsmarcus/Collapsing-Entries如果您想查看该版本，请访问： https://replit.com/@heyitsmarcus/Collapsing-Entries

You can add this functionality in just a few lines of extra CSS:您可以在额外的几行 CSS 中添加此功能：

/* If an .expando-controller is checked, show its sibling .indent elements */
.expando-controller:checked ~ div.indent {
    display: block;
}

/* If an .expando-controller is not checked, hide its sibling .indent elements */
.expando-controller:not(:checked) ~ div.indent {
    display: none;
}

So long as you keep the same structure that you have, you can expand this ad infinitum.只要你保持你拥有的相同结构，你就可以无限地扩展这个广告。

HTML 实现可折叠部分的代码

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-10-04 02:47:01

解决方案2
0 2021-10-04 02:42:23

HTML 实现可折叠部分的代码

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-10-04 02:47:01

解决方案2 0 2021-10-04 02:42:23

解决方案1
1 已采纳 2021-10-04 02:47:01

解决方案2
0 2021-10-04 02:42:23