I have a sidebar acting like a sidebar menu.

Outside of it, in the main content part, I have another sidebar that I want to reveal when hovering on a menu item. Inside this hidden sidebar I have lots of div's sorted by category. I need to open the panel and display the correct div so when I hover over a menu item, I target the div that has the same data-id. I manage, however I can't cancel the hover effect, the panel remains open.

what I am trying to do :

• When hovering a menu item, the panel opens and shows the related content. The menu item keeps the active class while I'm navigating inside the panel (this is ok) .
• As soon as the mouse goes out of the menu And the panel (on the main body or somewhere else on the sidebar) the panel closes (this is not ok)

An example of what I exactly want to achieve (you have to scroll a little and "skip sign up" to see the page)

$('.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 >
    <ul>
      <li  data-id="logo">logo</li>
        <li  data-id="banner">banner</li>
        <li  data-id="spacer">spacer</li>
        <li  data-id="cta"> cta</li>
        <li  data-id="content">content</li>
        <li  data-id="features">features</li>
        <li  data-id="table">footer</li>
    </ul>
</div>
<div >
    <div  data-id="logo">
        <button type="button"  id="add-brand-logo-standard-right">
         <p>Brand Logo Standard Rigth</p>
         <div >
         <div ></div>
         </div>
    </button>
        <button type="button"  id="add-brand-centered-logo">
            <p>HBrand centered Logo</p>
            <div >
            <div ></div>
            </div>
        </button>
   </div>
 </div>

CodePudding user response：

Ok finaly I found a solution :

I wrapped the sidebar and the panel inside a div, and the simply target that div to disable all events :

$('.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 >
  <div >              
      <ul>
        <li></li>
        <li></li>
        <li></li>
          </ul>
      </div>
      <div >
    ...
    </div>
  </div>

CodePudding user response：

You could change to:

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

and

$('.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"});
    });

and make a parent div like

<div >

** your html code **
</div>