03#Web 实战：实现下拉菜单

实现过程

实现一个简易的鼠标悬停菜单项显示其子项的下拉框控件。将用到 CSS 绝对定位、流式布局、动画等；JQuery 鼠标移入和移出事件、DOM 查找。效果图如下：

HTML 结构：

<div class="dropdown-group">
  <div class="dropdown">
    <div class="label">菜单1</div>
    <div class="items">
      <div class="item">菜单1-1</div>
    </div>
  </div>
</div>

使用流式布局让div.dropdown-group下的所有div.dropdown横向排列：

.dropdown-group {
  cursor: pointer;
  height: 40px;
  width: 220px;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  background-color: #7979de;
}

div.dropdown 的高和宽都要和父元素保持一致，并且定位是相对定位，因为其子项都是相对于它进行的。

.dropdown {
  height: 100%;
  width: 100%;
  position: relative;
}

div.dropdown div.items也就是下拉所展示的元素，相对于其父元素进行定位，自身是绝对定位，top的值和父元素的高度一致，即 40px，left的值设置 0px，左上角对齐父元素的左下角。display在鼠标没有悬停时设置为 none。

当鼠标悬停菜单时，div.dropdown div.items的display设置为 block。动画有 0.5s 的延迟，从 0 高度到最大高度过程中，元素溢出时必须要隐藏，即overflow-y: hidden。

.dropdown .items {
  display: none;
  width: 100%;
  padding: 5px;
  position: absolute;
  top: 40px;
  left: 0;
  overflow-y: hidden;
  box-sizing: border-box;
  background-color: #00b7ff;
}

.dropdown:hover .items {
  display: block;
}

最后，轮到 JQ 部分，当鼠标悬停时，查询每一个子项的总高度，以及添加样式和移除样式：

$(".dropdown")
  .mouseenter(function () {
    let $items = $(this).find("div.items");
    $(this).css({ "--items-height": `${$items.height()}px` });
    $items.addClass("show-items");
  })
  .mouseleave(function () {
    let $items = $(this).find("div.items");
    $items.removeClass("show-items");
  });

.show-items {
  animation: ShowItems 0.5s ease-in-out;
}

@keyframes ShowItems {
  0% {
    height: 0;
  }
  100% {
    height: var(--items-height);
  }
}