如何使用jQuery悬停/定位非子元素

Question

我有一个类似侧边栏菜单的侧边栏。

除此之外，在主要内容部分，我还有另一个侧边栏，当鼠标悬停在菜单项上时，我想显示它。在这个隐藏的侧边栏中，我有很多按类别排序的div。我需要打开面板并显示正确的div，这样当我将鼠标悬停在菜单项上时，我的目标是具有相同数据id的div。我设法做到了，但是我不能取消悬停效果，面板仍然打开。

我想做的事：

• 悬停菜单项时，面板将打开并显示相关内容。当我在面板中导航时，菜单项会保持活动类(这没关系(
• 鼠标一离开菜单，面板(在主体或侧边栏的其他地方(就会关闭(这不好(

我想要实现的目标的一个例子(你必须滚动一点并"跳过注册"才能看到页面(

$('.component_menu li').hover(function(){
$('.component_menu li').removeClass('active');
$(this).toggleClass('active');
var id = $(this).data('id');
$('.modules-panel__list-group').addClass('slide-lr')
$('.modules-panel__list-group >div').each(function(){
$(this).hide();
if($(this).data('id') == id) {

$(this).css('display','block');
}
})
})

.component_panel{
background: #fff;
height: calc(100% - 60px);
z-index:2;
padding:10px 0;
margin:35px 0 0;
}
.component_menu{
list-style:none;
z-index:2;
background-color:#ffffff;
padding:10px 0;
}
.component_menu li{
display:block;
padding:10px;
cursor:pointer;
background-color:#ffffff;
}
.component_menu li.active{
background-color: #eff3f6;
}
.component__logo,
.component__header,
.component__banner,
.component__feature,
.component__cta,
.component__footer{
display:none;
}

.modules-panel__list-group{
position: absolute;
top: 35px;
left:0;
bottom: 0;
width: 330px;
height: 100%;
margin: 0;
padding-top:50px;
background-color: #eff3f6;
visibility: hidden;
transform: translateX(-100%);
opacity: 0;
transition: all .5s;
will-change: transform,opacity;
z-index: 1;
overflow-y: scroll
}
.modules-panel__list-group p{
margin-bottom: 10px;
font-size: 12px;
font-weight: 300;
line-height: 1.17;
color: #727c80;
text-align:left;
}
.modules-panel__list-group>div{
padding:0 20px;
text-align:center;
margin:0 auto;
}
.modules-panel__list-group.slide-lr{
visibility: visible;
transform: translateX(225px);
opacity: 1;
max-height:600px;
}

<div class="component_menu">
<ul>
<li class="component_menuitem-logo" data-id="logo">logo</li>
<li class="component_menuitem-banner" data-id="banner">banner</li>
<li class="component_menuitem-spacer" data-id="spacer">spacer</li>
<li class="component_menuitem-cta" data-id="cta"> cta</li>
<li class="component_menuitem-content" data-id="content">content</li>
<li class="component_menuitem-feature" data-id="features">features</li>
<li class="component_menuitem-footer" data-id="table">footer</li>
</ul>
</div>
<div class="modules-panel__list-group">
<div class="component__logo" data-id="logo">
<button type="button" class="component" id="add-brand-logo-standard-right">
<p>Brand Logo Standard Rigth</p>
<div class="components">
<div class="header brand-logo-standard-right"></div>
</div>
</button>
<button type="button" class="component" id="add-brand-centered-logo">
<p>HBrand centered Logo</p>
<div class="components">
<div class="header brand-centered-logo"></div>
</div>
</button>
</div>
</div>

Answer 1

好吧，我终于找到了一个解决方案：

我将侧边栏和面板封装在一个div中，并简单地将该div作为禁用所有事件的目标：

$('.component_panel').mouseleave( function() { 
$(".component_menu li").removeClass("active");
$('.modules-panel__list-group').removeClass('slide-lr');
$('.modules-panel__list-group >div').css({"display":"none"});
});

<div class="flex-col-xs-2 component_panel">
<div class="component_menu">              
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="modules-panel__list-group">
...
</div>
</div>

Answer 2

您可以更改为：

.component_menu{
list-style:none;
z-index:2;
background-color:#ffffff;
padding:10px 0;
width:200px; //add width what you want
}
.test{ width:400px);

和

$('.component_menu li').hover(function(){
$('.component_menu li').removeClass('active');
$(this).addClass('active');
var id = $(this).data('id');
$('.modules-panel__list-group').addClass('slide-lr');
$('.modules-panel__list-group >div').hide();
$('.modules-panel__list-group >div').each(function(){
//$(this).hide();
if($(this).data('id') == id) {

$(this).css('display','block');
}
})
})
$(".test").mouseleave(function() { 
$(".component_menu li").removeClass("active");
$('.modules-panel__list-group').removeClass('slide-lr');
$('.modules-panel__list-group >div').css({"display":"none"});
});

并制作一个类似的父div

<div class="test">
** your html code **
</div>