点击关闭按钮无法还原Bootstrap DOM样式问题求助

我看了你的代码，问题主要出在关闭按钮参数错误以及Bootstrap列样式的优先级/布局恢复这两个地方，下面一步步给你修正：

问题1：关闭按钮传参错误 #

你所有的关闭按钮都调用了closeTab(1)，但每个tab对应的编号应该是1、2、3、4，这样关闭时才能正确对应到当前展开的tab。比如第二个tab的关闭按钮应该是closeTab(2)，以此类推。

问题2：Bootstrap列布局未正确恢复 #

Bootstrap的col-md-3类自带width:25%和float:left属性，你在关闭时只设置了style.width="25%"，但没有恢复float:left，而且直接设置inline width可能被Bootstrap的类优先级覆盖；另外，你在openTab里把其他tab设为display:none，关闭时恢复display:block后，必须把float加回来，否则四个div会垂直排列而不是水平布局。

修正后的完整代码 #

JavaScript部分

function openTab(tab) {
  var i, x, y;
  x = document.getElementsByClassName("containerTab");
  y = document.getElementsByClassName("OuterTab");
  for (i = 0; i < x.length; i++) {
    if(i === tab - 1) {
      // 展开当前tab：设置100%宽度，取消float，添加过渡
      y[i].style.width = "100%";
      y[i].style.float = "none";
      y[i].style.transition = "width 0.5s ease-in";
      // 显示展开内容
      x[i].style.maxHeight = "5000px";
      x[i].style.transition = "max-height 1s ease-in";
    } else {
      // 隐藏其他tab
      y[i].style.display = "none";
    }
  }
}

function closeTab(tab) {
  var i, x, y;
  x = document.getElementsByClassName("containerTab");
  y = document.getElementsByClassName("OuterTab");
  for (i = 0; i < x.length; i++) {
    if(i === tab - 1) {
      // 收起当前tab：恢复Bootstrap列的宽度和float，添加过渡
      y[i].style.width = ""; // 清空inline width，让col-md-3的width:25%生效
      y[i].style.float = "left";
      y[i].style.transition = "width 0.5s ease-in";
      // 隐藏展开内容
      x[i].style.maxHeight = "0px";
      x[i].style.transition = "max-height 1s ease-in";
    } else {
      // 恢复其他tab的显示和布局
      y[i].style.display = "block";
      y[i].style.float = "left"; // 必须恢复float才能水平排列
    }
  }
}

CSS部分

.border1{
  border: 1px solid; 
  border-radius: 5px;
  padding:2px
}
.border2{
  border: 1px solid; 
  border-radius: 7px;
  padding:10px
}
.containerTab { 
  cursor: pointer; 
  color: black; 
  max-height: 0; 
  min-height:0; 
  overflow: hidden; 
}

HTML部分

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" style="padding:10px">
  <div class="row">
    <div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(1);">
      <div class="border1">
        <div class="border2"> content 1 </div>
        <div id="b1" class="containerTab"> 
          Expanded content 1 
          <div><button onclick="closeTab(1)">Close</button></div> 
        </div>
      </div>
    </div>
    <div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(2);">
      <div class="border1">
        <div class="border2"> content 2 </div>
        <div id="b2" class="containerTab"> 
          Expanded content 2 
          <div><button onclick="closeTab(2)">Close</button></div> 
        </div>
      </div>
    </div>
    <div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(3);">
      <div class="border1">
        <div class="border2"> content 3 </div>
        <div id="b3" class="containerTab"> 
          Expanded content 3 
          <div><button onclick="closeTab(3)">Close</button></div> 
        </div>
      </div>
    </div>
    <div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(4);">
      <div class="border1">
        <div class="border2"> content 4 </div>
        <div id="b4" class="containerTab"> 
          Expanded content 4 
          <div><button onclick="closeTab(4)">Close</button></div> 
        </div>
      </div>
    </div>
  </div>
</div>

额外说明 #

• 我把closeTab里的width设置为空字符串，这样Bootstrap自带的col-md-3的width:25%就能正常生效，避免inline样式的优先级冲突。
• 展开时给当前tab设置float:none，确保100%宽度能占满整行；关闭时恢复float:left，让四个tab回到水平排列的布局。
• 修正了第四个tab的containerTab的id（原来和第三个重复是b3，改成了b4，虽然不影响功能，但规范起见还是修正了）。

内容的提问来源于stack exchange，提问作者Vrushali