你如何制作一个并排的可折叠按钮？-编程知识-白鹭情

你如何制作一个并排的可折叠按钮？所以我是使用 html 的新手，我一直在学习 W3 学校，他们给你这个可折叠的例子，但无论我做什么，它们都会堆栈并打开，我希望它们并排打开，接下来显示的内容相反，我将如何做到这一点？

    var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i  ) {
      coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      });
    }

.collapsible {
      background-color: #777;
      color: white;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
    }

    .active, .collapsible:hover {
      background-color: #555;
    }

    .content {
      padding: 0 18px;
      display: none;
      overflow: hidden;
      background-color: #f1f1f1;
    }

    <h2>Collapsibles</h2>

    <p>A Collapsible:</p>
    <button type="button" class="collapsible">Open Collapsible</button>
    <div class="content">
      <p>test</p>
    </div>

    <p>Collapsible Set:</p>
    <button type="button" class="collapsible">Open Section 1</button>
    <div class="content">
      <p>test1</p>
    </div>
    <button type="button" class="collapsible">Open Section 2</button>
    <div class="content">
      <p>test2</p>
    </div>
    <button type="button" class="collapsible">Open Section 3</button>
    <div class="content">
      <p>test3</p>
    </div>

uj5u.com热心网友回复：

_{我个人会完全避免使用 W3Schools.com。他们现在比 5 到 10 年前给出完全糟糕的建议时要好得多，但今天他们仍然有很多不足之处，尤其是在他们的服务器端教程中，其中教程中有大量示例代码例如，XSS 漏洞。尽管我很推荐 MDN，但我认识到 MDN 对初学者并不友好。反正...}

反正....

为了确保任意元素显示在一行中：
- 使用display: flex容器作为父级（不是祖先）。
- 还设定flex-wrap: nowrap为防止换行到多行。
  - 一定要设定flex-shrink: 1;在孩子身上，以防止不必要的水平滚动。
  - 为了使布局“具有回应性” - 或者至少可以在手机浏览器上使用，请使用@media重新启用flex包装的查询。
要具有可以在标题下显示/隐藏的内容，请使用<details><summary>.
- 该<details>元素允许网页具有可折叠的内容，而根本不需要任何脚本。
- _{这在 HTML 中并不是什么新鲜事（它于 2011 年添加到 HTML5，Chrome 和 Safari 于 2013 年支持它）但Firefox 直到 2016 年底才添加支持，MS Edge 直到 Edge 基于 Chromium 之后才支持它2019 年底。}
- 该<details>内容应包括容器（与直接子display: flex;）。
- 该<summary>元素包含始终可见的标题文本。
- 内容等除<summary>会被浏览器当元素被折叠隐藏。
  - 我更喜欢将所有其他内容（除了<summary>放入它自己的孩子<div>以确保一致的间距/填充）。

像这样：

:root {
  font-family: sans-serif;
}

div.collapsible-container {
  display: flex;
  flex-wrap: nowrap
}
  div.collapsible-container > details {
    flex-basis: 300px;
    flex-grow: 1;
    flex-shrink: 1;
  }


details {
  background-color: #777;
  border: 1px solid black;
  overflow: hidden;
}
details[open] {
  background-color: black;
}

  details > summary {
    color: white;
    padding: 1em;
    cursor: pointer;
  }
  details > summary:hover {
    background-color: black;
  }
  details > summary:active {
    background-color: pink;
  }
    details > summary::before {
      display: inline;
    }
    details[open] > summary::before {
      content: 'Close ';
    }
    details:not([open]) > summary::before {
      content: 'Open ';
    }
  
  details > summary   div {
    background-color: #f1f1f1;
    padding: 0.5em;
  }


/* Mobile-friendly (rounded corners on top and bottom items only): */
/* This is commented-out because the StackOverflow snippet preview area is too narrow, so it will always use the mobile-friendly rules when we want to show the desktop styles instead:
@media screen and (max-width: 767px) {
  details:first-child {
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
  }
  details:last-child {
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
  }
  div.collapsible-container {
    flex-direction: column;
  }
    div.collapsible-container > details {
      flex-basis: auto;
      flex-grow: 1;
      flex-shrink: 1;
    }
}
*/

/* Same-row rounded-corners for desktops only: */
@media screen and (min-width: 768px) {
  details:first-child {
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
  }
  details:last-child {
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
  }
}

<div class="collapsible-container">

  <details>
    <summary>Section 1</summary>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mauris orci, pellentesque a urna ac, blandit scelerisque metus. Aliquam vulputate, magna ut mattis ultrices, dui neque aliquam felis, et posuere ipsum neque scelerisque leo. Fusce consequat in turpis nec egestas. Nunc sit amet pharetra nunc. Aenean in nisl non ante auctor finibus nec a elit. Maecenas ultricies mauris nec neque ultricies, vitae facilisis augue elementum. Vivamus quis fringilla quam. Ut at dolor lobortis, pretium tortor eu, bibendum ligula. Quisque ac nunc quis nulla finibus finibus eget consequat libero.</p>
    </div>
  </details>
  
  <details>
    <summary>Section 2</summary>
    <div>
      <p>Curabitur elementum tellus in ex bibendum, vitae fermentum elit facilisis. Sed nec nulla gravida, rhoncus odio sit amet, tempus metus. Curabitur aliquet quam in libero convallis iaculis. Phasellus laoreet tincidunt augue.</p>
      <p>Proin eros urna, facilisis non dictum vitae, blandit in nulla. Cras sagittis nibh lorem, eu interdum felis dignissim non. Etiam aliquet turpis urna, feugiat ornare urna pellentesque eu. Aenean congue risus lorem, eu laoreet urna congue facilisis. Curabitur scelerisque magna quis mauris rhoncus fermentum. Maecenas venenatis egestas felis vitae porttitor.</p>
      <p>Nam laoreet augue vel purus pharetra, ornare sollicitudin urna sagittis. Curabitur condimentum elit euismod fermentum porttitor. Sed tellus diam, fermentum et vulputate nec, bibendum at sem. Nunc posuere vel ipsum quis lacinia.</p>
    </div>
  </details>
  
  <details>
    <summary>Section 3</summary>
    <div>
      <p>Nulla vel lobortis neque. Proin magna justo, consectetur ut nunc at, consectetur pulvinar mauris.</p>
    </div>
  </details>

</div>