并排顯示折疊部分-有解無憂

我目前正在使用 HTML、CSS 和 vanilla JavaScript 開發一個投資組合網站，我正在處理一些點擊時會折疊的部分。正如您在代碼片段中看到的，折疊部分是一個在另一個之上。我想將按鈕并排放置，但我不知道該怎么做。我對這些語言還很陌生，因為我一個月前才開始。

document.querySelectorAll(".collapse__button").forEach(button =>{
    button.addEventListener("click", () =>{
        const collapseContent = button.nextElementSibling;
        button.classList.toggle("collapse__button--active");
        if (button.classList.contains("collapse__button--active")){
            collapseContent.style.maxHeight = collapseContent.scrollHeight   "px";


        }else{
            collapseContent.style.maxHeight = 0;
        }

    });

});

.collapse__button {
    /* display:  inline-block; */
    padding: 1em 2em ;
    background: var(--clr-dark);
    color: var(--clr-light);
    text-decoration: none;
    cursor: pointer;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: var(--fw-bold);
    transition: transform 200ms ease-in-out;
    max-width: 200px;
    margin: 5em 5em;
    border: 8px var(--clr-accent);
    border-radius: 20px;
  
   
  }

.collapse__button:hover{
    transform: scale(1.1);
    background: var(--clr-accent);
}


  .collapse__button::after{
      content: "\25be";
      float: right;
      transform: scale(1);
  }


.collapse__content{
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s;
    padding: 0 15px;


}


  .collapse__button--active::after{
    content: "\25b4";
}

.Title{
    text-align: center;
}

        <section class = "Title">
            <p> Title of Example</p>




            <div class = "collapse">
                <button class = "collapse__button"> Example 1 </button> 
                    <div class="collapse__content">
                        <p>
                            writing
                        </p>
                    </div>
            </div>
            
            <div class = "collapse">
                <button class = "collapse__button"> Example 2 </button> 
                    <div class="collapse__content">
                        <p>
                            more writing
                        </p>
                    </div>
            </div>

uj5u.com熱心網友回復：

嘗試創建另一個包含示例 1 和示例 2 的 div。在容器內將其顯示為 FlexBox。這應該使他們并排。

這是我所做的：

如果您有任何問題，請告訴我

document.querySelectorAll(".collapse__button").forEach(button =>{
    button.addEventListener("click", () =>{
        const collapseContent = button.nextElementSibling;
        button.classList.toggle("collapse__button--active");
        if (button.classList.contains("collapse__button--active")){
            collapseContent.style.maxHeight = collapseContent.scrollHeight   "px";


        }else{
            collapseContent.style.maxHeight = 0;
        }

    });

});

.collapse__button {
    /* display:  inline-block; */
    padding: 1em 2em ;
    background: var(--clr-dark);
    color: var(--clr-light);
    text-decoration: none;
    cursor: pointer;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: var(--fw-bold);
    transition: transform 200ms ease-in-out;
    max-width: 200px;
    margin: 5em 5em;
    border: 8px var(--clr-accent);
    border-radius: 20px;
  
   
  }

.collapse__button:hover{
    transform: scale(1.1);
    background: var(--clr-accent);
}


  .collapse__button::after{
      content: "\25be";
      float: right;
      transform: scale(1);
  }


.collapse__content{
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s;
    padding: 0 15px;


}


  .collapse__button--active::after{
    content: "\25b4";
}

.Title{
    text-align: center;
}

  
  .container {
    display: flex;
    justify-content: center;
  }

        <section class = "Title">
            <p> Title of Example</p>


            <div class="container">
            <div class = "collapse">
                <button class = "collapse__button"> Example 1 </button> 
                    <div class="collapse__content">
                        <p>
                            writing
                        </p>
                    </div>
            </div>
            
            <div class = "collapse">
                <button class = "collapse__button"> Example 2 </button> 
                    <div class="collapse__content">
                        <p>
                            more writing
                        </p>
                    </div>
            </div>
          </div>
</section>

uj5u.com熱心網友回復：

 document.querySelectorAll(".collapse__button").forEach(button =>{
     button.addEventListener("click", () =>{
       const collapseContent = button.nextElementSibling;
      button.classList.toggle("collapse__button--active");
      if (button.classList.contains("collapse__button--active")){
                    collapseContent.style.maxHeight = collapseContent.scrollHeight   "px";
                }else{
                    collapseContent.style.maxHeight = 0;
                }

            });

        });

        .collapse__button {
            /* display:  inline-block; */
            padding: 1em 2em ;
            background: var(--clr-dark);
            color: var(--clr-light);
            text-decoration: none;
            cursor: pointer;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: var(--fw-bold);
            transition: transform 200ms ease-in-out;
            max-width: 200px;
            margin: 5em 5em;
            border: 8px var(--clr-accent);
            border-radius: 20px;
          
           
          }

        .collapse__button:hover{
            transform: scale(1.1);
            background: var(--clr-accent);
        }


          .collapse__button::after{
              content: "\25be";
              float: right;
              transform: scale(1);
          }


        .collapse__content{
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.2s;
            padding: 0 15px;


        }


          .collapse__button--active::after{
            content: "\25b4";
        }

        .Title{
            text-align: center;
        }

        .container {
        display: flex;
        }

<section class = "Title">
<p> Title of Example</p>

        <div class="container">
            <div class = "collapse">
               <button class = "collapse__button"> Example 1                      </button> 
               <div class="collapse__content">
                 <p>
                    writing
                   </p>
                </div>
         </div>
                    
             <div class = "collapse">
                 <button class = "collapse__button"> Example 2 </button> 
            <div class="collapse__content">
               <p>
                   more writing
                    </p>
                </div>
               </div>
          </div>

你做得很好。只需用一個 div 容器包裹你的兩個折疊部分（也稱為手風琴組件），并在 CSS flexbox 中制作該容器。我在你的代碼中為你做的。JS 我不必碰。希望這可以幫助。

uj5u.com熱心網友回復：

如果您不想使用 Flexbox，您可以使用 display:table 來實作。

display:table 是這樣作業的：并排顯示折疊部分

它就像一張實際的桌子；然而; 表格具有語意意義，不應用于布局。例如，請考慮使用表格進行布局的不良實踐代碼：

.topbar {
  background-color: blue;
  color:white;
  width: 100%;
}
<table class="topbar">
<tr>
<td>Site Name</td>
<td><label>Search: <input type="search" /></label></td>
</tr>
</table>
它看起來像一個頂部欄，但螢屏閱讀器可能會將它與保存實際資料的表格混淆。

document.querySelectorAll(".collapse__button").forEach(button => {
  button.addEventListener("click", () => {
    const collapseContent = button.nextElementSibling;
    button.classList.toggle("collapse__button--active");
    if (button.classList.contains("collapse__button--active")) {
      collapseContent.style.maxHeight = collapseContent.scrollHeight   "px";


    } else {
      collapseContent.style.maxHeight = 0;
    }

  });

});

.collapse__button {
  /* display:  inline-block; */
  padding: 1em 2em;
  background: var(--clr-dark);
  color: var(--clr-light);
  text-decoration: none;
  cursor: pointer;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: var(--fw-bold);
  transition: transform 200ms ease-in-out;
  max-width: 200px;
  margin: 5em 5em;
  border: 8px var(--clr-accent);
  border-radius: 20px;
}
#wrapper {
  display: table;
}
.container {
  display: table-row;
}
.collapse {
  display: table-cell;
}
.collapse__button:hover {
  transform: scale(1.1);
  background: var(--clr-accent);
}

.collapse__button::after {
  content: "\25be";
  float: right;
  transform: scale(1);
}

.collapse__content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s;
  padding: 0 15px;
}

.collapse__button--active::after {
  content: "\25b4";
}

.Title {
  text-align: center;
}

<section class="Title">
  <p> Title of Example</p>
  <div id="wrapper">
    <div class="container">
      <div class="collapse">
        <button class="collapse__button"> Example 1 </button>
        <div class="collapse__content">
          <p>
            writing
          </p>
        </div>
      </div>

      <div class="collapse">
        <button class="collapse__button"> Example 2 </button>
        <div class="collapse__content">
          <p>
            more writing
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

并排顯示折疊部分

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

標籤：javascript html css

上一篇：如何有條件地宣告useState？

下一篇：React中的JSON決議嵌套物件