Javascript/jQuery悬停在不同的元素上

Question

我有一个奇怪的问题，源于布局，我无法改变以更好地解决此问题。

基本上我有一个菜单，如下所示：

<div id="hornav"> 
<ul class="container"> 
    <li class="item1">link</li> 
    <li class="item2">link</li> 
</ul> 
</div> 

而且我有下拉菜单分离，像这样：

<div class="dropdowns"> 
    <div id="ditem1" class="dropdown-div">content</div> 
    <div id="ditem2" class="dropdown-div">content</div> 
</div> 

什么，我需要做的是使链接悬停出示容器。我可以做到这一点，但我也需要做到这一点，如果我把鼠标移到显示的下拉菜单上，它并不会消失。

的由于网站运行的方式，什么样的工具，我受限于我不能使li元素内部的下拉菜单（它是动态的由CMS生成的，不带任何选项） - 这一点是非常重要的。

现在，这是我正在使用的JavaScript代码。它在一定程度上起作用，尽管IT非常麻烦（如果我将鼠标悬停在包含的元素上，然后将其悬停后消失）。这段代码可能会稍微过时，因为我一直在逐渐尝试多种方法，并且很少成功地阅读这个问题。

function dropdown(event,passDown){ 
    var classes=$(passDown).attr('class').split(' '); 
    for(var i=0;i<classes.length;i++){ 
     if(classes[i].indexOf('item')!=-1){ 
      var classId=classes[i]; 
     } 
    } 
    var elem=$('#d'+classId); 
    event.preventDefault(); 
    if(!elem.hasClass('active')){ 
     $('#hornav li.active,.dropdown-div.active').each(function(){ 
      $(this).removeClass('active'); 
     }); 
     $('#d'+classId).addClass('active'); 
     $(passDown).parent().addClass('active'); 
    }else{ 
     $('#hornav li.active,.dropdown-div.active').each(function(){ 
      $(this).removeClass('active'); 
     }); 
    } 
} 
$(document).ready(function(){ 
    $('#hornav>ul>li[class*="item"]:not(.item20)').each(function(){ //trigger all drop down links 
     $(this).hover(function(event){ 
      event.stopPropagation(); 
      console.log(event); 
      var setIt=this; 
      if(event.relatedTarget.id.indexOf('ditem')==-1){ 
       dropdown(event,this); 
      } 
     }); 
    }); 
    $('.dropdowns .dropdown-div').each(function(){ 
     $(this).hover(function(event){ 
      event.stopPropagation(); 
      console.log(event); 
      var setIt=this; 
      //if(event.offsetParent.className.indexOf('item')==-1){ 
       $('#hornav li.active,.dropdown-div.active').each(function(){ 
        $(this).removeClass('active'); 
       }); 
      //} 
     }); 
    }); 
}); 

编辑：

我们已经决定采取另一种方法，打算改用点击悬停巫不会造成问题。

我会暂时将其打开，因为它似乎是一个可以帮助他人的问题。

编辑2：

决不解决了这个，最终想出另一种完全不同的解决方案。但是我觉得这个问题可能会在未来帮助人们，所以如果有人想回答的话，我会保持开放。

Answer 1

对于每个子元素，火父元素的事件：

jQuery(el).on('mouseenter mouseleave', function(e) { 
    jQuery(this).parent().trigger(e.type); 
});