点击一个盒子出现另一个盒子代码

下面是一个简单的点击一个盒子出现另一个盒子的代码实现：

HTML:

<div class="box1" onclick="showBox2()">Click me</div>
<div class="box2" id="box2"></div>

CSS:

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  text-align: center;
  line-height: 100px;
  color: white;
  cursor: pointer;
}

.box2 {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

JS:

function showBox2() {
  var box2 = document.getElementById("box2");
  if (box2.style.display === "none") {
    box2.style.display = "block";
  } else {
    box2.style.display = "none";
  }
}

这里我们使用了一个名为`showBox2()`的JavaScript函数，用于控制`box2`的显示与隐藏。当点击`box1`时，会调用`showBox2()`函数，该函数首先获取`box2`元素的引用，然后判断`box2`的`display`属性是否为`none`，如果是则将其设置为`block`，否则将其设置为`none`，从而实现了点击一个盒子出现另一个盒子的效果。