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); 
});