嗨,我正在构建一个菜单,我需要检测鼠标的下一步动作。目前我正在使用event.relatedTarget
并获取event.relatedTarget.id
下一个元素。它一直有效,直到我不得不在我的菜单上对我的 css 进行一些修改,所以我不得不摆脱overflow: hidden;
和使用display: inline-block;
. 现在发生的事情是event.relatedTarget
是一个空字符串,除非我将鼠标快速拉到我的菜单项。生病发布部分代码,并在 jsfiddle 上完整地发布。有什么想法吗?
Navigation.top_links.on('mouseleave', function (event) {
var sub_wrapper = $('.sub-wrapper'),
target_id = event.relatedTarget.id;
console.log(event.relatedTarget.id);
console.log(event.relatedTarget.id);
if (target_id == 'got_me_sections' || target_id == 'got_me_products' || target_id == 'ind_sections' || target_id == 'ind_products') {
console.log('mouse down to items');
return false;
}
sub_wrapper.removeClass('sections').removeClass('products');
sub_wrapper.hide();
});
它的html太多了,所以有点乱,抱歉。
<ul id="top_nav">
<li class="first"><a href="#" id="sections" class="nav-link">sections</a></li>
<li><a href="#" id="products" class="nav-link">products</a></li>
<li>
<div id="nav_cart">
<div class="gfx-div-cart"></div>
</div>
</li>
</ul>
<div id="sub_nav">
<div id="sub_sections" class="sub-wrapper">
<div id="got_me_sections" class="top-space">
<div id="ind_sections" class="indicator"></div>
</div>
<div class="nav-items-wrapper">
<div class="nav-items-breadcrumb">
<ul class="breadcrumb">
<li class="bc first">sections</li>
<li class="bc last"> </li>
</ul>
</div>
<div class="nav-items">
<ul class="nav-items-list">
<li><a href="#" class="nav-item">item.Name</a></li>
</ul>
</div>
</div>
</div>
</div>