將鼠標懸停在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 顯示它的標題，並且只要您保持懸停標題或子菜單（因為兩者都是類別的一部分），它就會保持顯示。