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

Javascript / jQuery悬停在单独的元素上

1 个答案: