<div style="height:50%;" id="roadMap"> </div> <div id="" style="height:50%; width:100%;"> </div>中间放个按钮让DIV可以上下折叠

您可以尝试使用 JavaScript 和 CSS 实现一个可折叠的 `DIV`。下面是一种可能的实现方式：

HTML 代码：

<div class="container">
  <button class="toggle-btn" onclick="toggleDiv()">折叠</button>
  <div class="content" id="roadMap">
    <!-- 这里是您想要放置的内容 -->
  </div>
</div>

CSS 代码：

.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.toggle-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.content {
  height: 50%;
  overflow: hidden;
  transition: height 0.5s ease;
}

JavaScript 代码：

function toggleDiv() {
  var div = document.getElementById("roadMap");
  var btn = document.querySelector(".toggle-btn");
  if (div.style.height) {
    div.style.height = null;
    btn.innerHTML = "折叠";
  } else {
    div.style.height = "0";
    btn.innerHTML = "展开";
  }
}

这段代码将创建一个 `DIV`，其中包含一个按钮和一个具有初始高度的内容区域。当用户单击按钮时，JavaScript 函数将通过更改 `DIV` 的高度来切换内容区域的可见性。