将鼠标悬停在vuejs中的父菜单或子菜单上时如何继续显示动态子菜单？

Question

我需要关于 vuejs 中这个侧边栏的帮助，我正在尝试制作一个动态侧边栏，当我将鼠标从父级菜单或子菜单上移开时，我必须在其中保持打开子菜单，每当我从父级删除鼠标时，子菜单就会消失。 我需要继续打开子菜单。 这是我的代码：

<div v-for="item in items" class="categories" >
       <p  @mouseover="onOver(item)" @mouseleave="onLeave">{{item.title}}</p>
       <div v-if="ShowSubMenu" class="subMenu">
           <div v-for="childItem in item.child" > <p class="text"> {{childItem.childTitle}}</p> </div>
           </div>

       </div>

     </div>

Vue Js：

data: {
  ShowSubMenu: false,

    items: [
    {
       title: 'name'
      },
      {
       title:'hoverMe',
       child : [
       {childTitle : 'ChildTitle1'},
        {childTitle : 'ChildTitle2'},
         {childTitle : 'ChildTitle3'},

       ] ,
       },
       { 
        title: 'name3'}
    ]
  },
  methods: {
    onOver: function(item){
        if (item.child != null) {
      this.ShowSubMenu=true;


      }
    },
    onLeave: function(){

      this.ShowSubMenu=false;



    }
  }

css：

.categories{
  background-color:red;
  width:100px;
  height:200px;
}
.subMenu{
  background-color:red;



  height:150px;
  width:150px;
  position:absolute;
  top:100px;
  left:150px;

}
.text{
  color:blue;





}

Answer 1

这将是您的问题的可能解决方案之一。 它也纯粹基于 CSS：

https://jsfiddle.net/vugrjbn6/16/

.categories{
  background-color: red;
  width: 100px;
  height: 200px;
  position: relative;
}

.subMenu{
  display: none;
  position: absolute;
  background-color: red;
  height: 150px;
  width: 150px;
  top: 0;
  left: 100%;
}

.categories:hover .subMenu {
  display: block;
}

只有当类别悬停时，它才会显示子菜单。 要意识到的重要一点是该类别包含标题和子菜单。 因此，默认情况下子菜单是隐藏的，如果您首先 hover 显示它的标题，并且只要您保持悬停标题或子菜单（因为两者都是类别的一部分），它就会保持显示。