Я пытаюсь создать меню, в котором есть дочерние меню; когда родитель находится над парой, открывается дочернее меню. Дочернее меню должно закрываться только тогда, когда мышь покидает либо дочернее меню, либо родительское. Проблема в том, что когда вы перемещаете мышь в дочернее меню, оно закрывается. Мне не нужно закрываться, если мышь находится в открытом дочернем меню.
Я пытался добавить различные таймауты и событие mouseenter для дочернего элемента, чтобы повторно вызвать событие. Однако когда мышь покидает родителя, дочернее меню закрывается.
<li
v-else
:class="[{'has-sub-menu': item.child}, {'active': itemHover === true}]"
v-on="disableHover && isCollapsed ? { click: mouseEnterEvent } : { mouseover: mouseEnterEvent }"
@mouseout="mouseLeaveEvent"
>
<a :href="item.href">
<div v-if="level == 1" class="icon-w">
<div :class="item.icon"></div>
</div>
{{item.title}}
</a>
<div v-if="item.child" class="sub-menu-w">
<div class="sub-menu-header">{{item.title}}</div>
<div class="sub-menu-icon">
<i :class="item.icon"></i>
</div>
<div class="sub-menu-i">
<ul class="sub-menu">
<sidebar-menu-item
v-for="(subItem, index) in item.child"
:key="index"
:item="subItem"
:level="level+1"
:show-child="showChild"
:rtl="rtl"
:is-collapsed="isCollapsed"
></sidebar-menu-item>
</ul>
</div>
</div>
</li>
methods: {
mouseEnterEvent(event) {
setTimeout(() => {
event.stopPropagation();
this.itemHover = true;
this.$emit("menu-active", { event, item: this.item });
}, 0);
},
mouseLeaveEvent(event) {
setTimeout(() => {
event.stopPropagation();
this.itemHover = false;
this.$emit("menu-not-active", { event, item: this.item });
}, 1000);
}
}
Мне нужно, чтобы дочернее меню оставалось открытым, пока мышь входит в него.