如何使用引导程序 3 或 4 一次显示一个折叠答案

【问题标题】：How to display one collapse at a time with bootstrap 3 or 4如何使用引导程序 3 或 4 一次显示一个折叠
【发布时间】：2017-11-03 17:10:53
【问题描述】：

我正在使用 Bootstrap 4 从头开始构建一个网站，但遇到了一个对于经验丰富的 Bootstrap 开发人员来说可能很容易的问题。我找到并想出了一个解决方案，说明如何使用原始 Javascript 代码一次折叠一个元素，但是如何使用 Bootstrap 4 来实现这一点，还是应该坚持使用这种类型的解决方案？当我尝试 data-toggle / data-target / 时，我将不胜感激任何提示，并且似乎我错过了一些让它正确发生的东西。 JS语法不是很强，但对它有一定的了解。见例子here：

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';
                  }
            }
      }
}

【问题讨论】：

您的 jsfiddle 似乎对我有用。单击链接时仅显示一个div。你的问题解决了吗？
如果你不介意一点 jquery 试试这个，它更简单jsfiddle.net/m4m1L215/1
是的，这段代码运行良好，我的目标是让它如您在小提琴中看到的那样，但是如何使用带有按钮的 bootstrap 4 来实现它，我尝试使用 bootstrap 4 折叠功能来实现：@ 987654323@@ordonezalex
我认为我在解释我的道歉时走错路了，所以我在测试服务器上做了一个例子，这就是我在这个测试服务器上使用 botstrap 所取得的成果sintra.craftpearl.com/demo.php 问题是，我该怎么做让它像这里一样，但使用 boostrap 4：jsfiddle.net/m4m1L215/">jsfiddle</a> @Carsten

标签： javascript twitter-bootstrap bootstrap-4

【解决方案1】：

我认为您可以使用Bootstrap Accordian 解决它。检查这个例子https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example

【讨论】：