你如何制作一個并排的可折疊按鈕？-有解無憂

你如何制作一個并排的可折疊按鈕？所以我是使用 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/391044.html

標籤：html 按钮

上一篇：Tkinter按鈕未顯示所需文本