前端审查元素技巧，修改弹出层不在body内的样式

1.遇到的问题

 使用antd和element组件库的menu菜单

鼠标hover的时候 menu展开但审查元素的时候 不能保持这个状态

导致不好更改样式的问题

一般hover的元素我们可以给这个盒子强制设置元素状态 使它属于激活状态 但是并不适用与组件的menu菜单 就算全部勾选也不能打开菜单栏

2.出现的原因

下拉菜单的条件是用js控制的 为css设置元素状态并不生效

3.解决方案

（1）看清触发效果到底将动态的属性绑定在哪个盒子上了

（2）如图所示我们hover信息公告实际上是给li元素添加了属性，我们就可以在li元素上右键=>发生中断的条件=>属性更改

 

 

（3）成功后在li元素的左边会有一个蓝色断点 我们就可以再次触发hover事件，程序会被暂停，点击下一步并且再次触发就可以停留在下拉框打开的状态，然后我们就可以审查元素更改成需要的效果

（4） 注意这个断点不会因为页面的刷新而消失，使用完毕之后还需在添加断点的地方将断点取消

4.衍生问题

如果一个页面中存在多个menu或者menu和分页器共存的时候，因为下拉框都被插入到了script标签同一层级所以导致样式不能区分，如果调整menu下拉的位置，分页器的下拉也会改变。导致样式混乱的问题
选择下拉的标签并没有插入到body标签中，打开控制台可以看到这个标签和script标签处于同一层级

5.解决方案

vue中element ui 提供一个属性 :popper-append-to-body=”false”

这个属性 可以决定 是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时，可尝试修改该属性

antd中 menu菜单的子菜单同样不会插入到body元素 不过antd提供一个属性 popupOffset={[0, -20]}

可以调整子菜单的位置

        <SubMenu key="park" title="园区入驻" popupOffset={[0, -20]}>
          <Menu.Item key="Supporting ">
            <Link to={""} className="option">
              扶持政策
            </Link>
          </Menu.Item>
          <Menu.Item key="entry">
            <Link to={""} className="option">
              入驻流程
            </Link>
          </Menu.Item>
          <Menu.Item key="apply">
            <Link to={""} className="option">
              入驻申请
            </Link>
          </Menu.Item>
        </SubMenu>