奇奇怪怪的知识又增加了————做下拉菜单遇到的一个小问题。

昨晚在写一个静态页面的时候，写了一个下拉菜单。

预想情况是点击之后出现的下拉菜单应该把下面的开始时间结束时间一起往下推，**但是，出现了一个神奇的现象

**如图

？？？？
这跟我预想的咋完全不一样？

一开始以为是定位的问题导致元素脱离了标准流
好吧那就将错就错。

于是，就继续做下去（昨晚写的时候已经挺晚的了，只想着写完。）

但是，又发现了一个小Bug,点击选项的时候对应的事件无法触发？？
触发的是在开始时间对应的绑定事件（其实这里的图层关系是开始时间这一层是在菜单的上方的，所以导致点击的时候只触发了开始时间的时间与自己预期不符。。于是又多写了几行代码解决了一个问题。）

接下来进行复现：

  <style>
    * {
      text-align: center;
    }

    .box2 {
      width: 100px;
      height: 20px;
      background-color: royalblue;
    }

    .box1 {
      height: 20px;

      transition: ease 1s;
      overflow: hidden;
    }

    .box1>div {
      margin-top: 10px;
    }

    .box3 {
      width: 500px;
      height: 60px;

      background: linear-gradient(#fede01 0%, #f6cb04 100%);
    }

    .box2>div>div {
      height: 20px;
      border: 1px solid green;
    }

    body div.active {
      height: 200px;
    }
  
   <div class="box2">
    <div class="box1"  data-value="菜单">
      菜单
      <div data-value="游戏">游戏</div>
      <div data-value="运动">运动</div>
      <div data-value="学习">学习</div>
    </div>
  </div>
  <div class="box3">我是在下面的盒子</div>
  </style>

 <script>
    var box1 = document.querySelector(".box1");
    var box3 = document.querySelector(".box3");
    box1.addEventListener("click", function (e) {
      alert(e.target.dataset.value);
      box1.className.includes("active") ?
        (box1.className = "box1") :
        (box1.className = "box1 active");
    });
    box3.addEventListener("click", function () {
      console.log("我是box3");
    });

  </script>

下面说下原因，
因为我的box2盒子只设置了20px，而在菜单下拉的时候变化的高度是box2的子盒子box1的高度，所以也就导致了紧贴着box2的box3不会跟着往下移。

解决的方法很简单：

1）去掉box2
2）box2的高度一起跟着变化

基础不牢，地动山摇