1

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

基本上我有一个这样的菜单：

<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 代码。它在一定程度上起作用，尽管它非常有问题（如果我将鼠标悬停在包含的元素上，然后悬停它就会消失）。这段代码可能有点过时，因为我一直在逐渐尝试多种方法，并且阅读了这个问题但收效甚微。

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：

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

4

1 回答 1

1

for each child element, fire the events on the parent element:

jQuery(el).on('mouseenter mouseleave', function(e) {
    jQuery(this).parent().trigger(e.type);
});
于 2014-02-06T06:14:23.883 回答