如何使用引導程序3或4一次顯示一個崩潰

Question

我正在使用Bootstrap 4從頭開始構建網站，並且陷入了一個問題，對於經驗豐富的Bootstrap開發人員而言，這可能很容易。 我找到並提出了一個解決方案，該解決方案涉及如何使用原始Javascript代碼一次折疊一個元素，但是如何使用Bootstrap 4實現此功能，還是應該堅持這種解決方案？ 我嘗試使用data-toggle / data-target /時會得到任何提示，但我似乎缺少一些使它正確執行的提示，我將不勝感激。 JS語法不是很強，但是對此有所了解。 在這里查看示例：

HTML：

<table>
   <tr>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >collapse</a>
         </div>
         <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >collapse</a>
         </div>
         <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >collapse</a>
         </div>
         <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div>
      </td>
   </tr>
</table>

JS：

function showonlyone(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
            for(var x=0; x<newboxes.length; x++) {
                  name = newboxes[x].getAttribute("class");
                  if (name == 'newboxes') {
                        if (newboxes[x].id == thechosenone) {
                        newboxes[x].style.display = 'block';
                  }
                  else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}

Answer 1

我認為您可以使用Bootstrap Accordian解決此問題。 檢查此示例https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example