如何解决折叠抽屉关闭时仍显示边框的问题？

问题说明 #

需要实现折叠抽屉关闭时隐藏其边框，但当前关闭状态下，抽屉内容区（.content）仍显示边框线条。尝试通过点击事件控制边框显示/隐藏，但仅生效一次后边框彻底消失。

现有代码 #

HTML #

<button type="button" class="collapsible"> Loose Crimp Issue </button>
<div class="content">
  <div class="column">
    <p>Check that the wires and crimps are fully inserted into J1, J4, and trandsducer connectors.</p>
  </div>
  <div class="column">
    <img src="../images/looseCrimp.png" alt="Picture of Connectors">
  </div>
</div>

<button type="button" class="collapsible"> Consult Logs </button>
<div class="content">
  <div class="column">
    <p>Ensure the disc strength is not at “0”.</p>
  </div>
  <div class="column">
    <img src="../images/discStrength.png" alt="Picture of Logs">
  </div>
</div>

CSS #

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: white;
  border: solid 1px #D1D3D4;
  border-radius: 3px;
}

.collapsible {
  background-color: white;
  color: #021032;
  cursor: pointer;
  padding: 14px;
  width: 100%;
  border: solid 1px #D1D3D4;
  border-radius: 6px;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin: 5px 0px;
}

.active, .collapsible:hover {
  background-color: #f7f7f7;
}

JavaScript #

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.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

解决方案 #

方法1：CSS兄弟选择器控制（推荐） #

无需修改JS，仅调整CSS即可实现需求，符合样式与逻辑分离的最佳实践：

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  /* 添加边框过渡，让状态切换更平滑 */
  transition: max-height 0.2s ease-out, border-color 0.2s ease-out;
  background-color: white;
  /* 默认用透明边框，避免布局跳动 */
  border: solid 1px transparent;
  border-radius: 3px;
}

/* 仅当按钮处于active状态时，显示内容区边框 */
.collapsible.active + .content {
  border-color: #D1D3D4;
}

/* 保留原有按钮样式 */
.collapsible {
  background-color: white;
  color: #021032;
  cursor: pointer;
  padding: 14px;
  width: 100%;
  border: solid 1px #D1D3D4;
  border-radius: 6px;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin: 5px 0px;
}

.active, .collapsible:hover {
  background-color: #f7f7f7;
}

方法2：JavaScript直接控制样式 #

如果需要更精细的逻辑控制，可调整JS点击事件，同步切换边框状态：

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.maxHeight){
      content.style.maxHeight = null;
      content.style.borderColor = "transparent"; // 关闭时隐藏边框
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
      content.style.borderColor = "#D1D3D4"; // 展开时显示边框
    }
  });
}

同时需要修改.content默认CSS，将border: solid 1px #D1D3D4改为border: solid 1px transparent，避免初始状态显示边框。

说明 #

两种方法均能解决“仅生效一次”的问题：方法1通过按钮的active状态联动控制边框，逻辑简洁易维护；方法2通过JS直接操作样式，适合需要额外逻辑判断的场景。

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