类似携程顶部标签栏hover效果

效果1

效果2

在官网上很多类似这种的效果，使用也相对广泛，半年前我曾实现过类似的效果，当时的实现思路主要是下拉框是共用一个，然后每次都根据顶部hover的a标签，然后动态的更新弹出框的内容；我记得当时遇到了一些问题，就是弹出框先收回，然后再弹出等，同时操作起来逻辑相对复杂、混乱，这次我重新实现了一下类似的效果，感觉逻辑和思路更合理一些，记录一下！！！

代码难点(注意点)

鼠标进入和离开视图的事件要选择 mouseenter 和 mouseleave
选择说明：
(1)mouseenter 只会在进入该视图的时候调用一次，同时不会因为经过子元素的时候而调用，这就是不使用mouseover的原因；
(2)mouseleave 只会在鼠标离开视图的时候调用一次，而不会因为经过或者离开子视图的时候都调用，这也是不选择 mouseout 的原因。
底部弹出的下拉框和顶部的a标签同属于一个li标签的子元素，只不过默认样式都是隐藏的，只不过是通过鼠标的事件来控制它的显示和隐藏。
因为弹出框都是属于 li 的子元素，所以左边的对齐是和 a标签对齐，所以我使用了定位，然后根据 li 的位置向左偏移

:style="{left: ((item.id - 1) * - 52 + 'px')}"

代码

此处主要是vue的一个组件的方式实现的
html

<template>
  <div>
    <ul class="cate-view">
      <li :class="[(item.id != 1) ? 'item-left' : '', 'item-li']"
          @mouseenter.stop="enterHandle"
          @mouseleave.stop="leaveHandle"
          v-for="item in listData"
          :key="item.id">
        <a href="#">{{ item.name }}</a>
        <div class="alert-view"
             :style="{left: ((item.id - 1) * - 52 + 'px')}">
          <ul class="alert-ul">
            <li class="alert-li"
                v-for="subItem in item.childs"
                :key="subItem.id">
              <a href="#">{{ subItem.name }}</a>
            </li>
          </ul>
          <span class="alert-arrow"
                :style="{left: ((item.id - 1) * 52 + 16 + 'px')}"></span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      listData: [
        { id: 1, name: '酒店', childs: [{ id: 1, name: '国内酒店' }, { id: 2, name: '海外酒店' }, { id: 3, name: '民宿客栈' }, { id: 4, name: '海外客栈' }] },
        { id: 2, name: '旅游', childs: [{ id: 1, name: '周末游' }, { id: 2, name: '跟团游' }, { id: 3, name: '自由行' }, { id: 4, name: '邮轮' }, { id: 4, name: '私家团' }] }
      ]
    }
  },
  methods: {
    leaveHandle (e) {
      let lastChild = e.target.lastChild;
      lastChild.style.display = 'none';
    },
    enterHandle (e) {
      let lastChild = e.target.lastChild;
      lastChild.style.display = 'block';
    }
  },
}
</script>

style

<style lang="scss" scoped>
.cate-view {
  background-color: #2577e3;
  width: 100%;
  height: 40px;
  .item-li {
    position: relative;
    float: left;
    height: 40px;
    background-color: #2577e3;
    text-align: center;
    padding: 0 11px;
    a {
      color: #fff;
      line-height: 40px;
      font-size: 15px;
    }
    .item-li:nth-child(1) {
      background-color: red;
    }
    .alert-view {
      display: none;
      position: absolute;
      left: 0;
      width: 1000px;
      border: 1px solid #2577e3;
      border-width: 0 1px 1px 1px;
      .alert-li {
        float: left;
        height: 40px;
        text-align: center;
        padding: 0 11px;
        a {
          color: #333;
          &:hover {
            color: #2577e3;
          }
        }
      }
      .alert-arrow {
        position: absolute;
        z-index: 10;
        top: -8px;
        left: 16px;
        border-width: 0 8px 8px 8px;
        border-style: solid;
        border-color: transparent transparent #fff transparent;
      }
    }
  }
  .item-left::before {
    position: absolute;
    content: "";
    top: 13px;
    left: 0;
    border-width: 0 1px 0 0;
    height: 15px;
    border-color: #1d67dd;
    border-style: solid;
  }
}
</style>