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コードです。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：

これを解決したことはなく、別のまったく異なる解決策を考え出すことになりました。ただし、この質問は将来人々に役立つ可能性があると思うので、誰かが答えたい場合は開いたままにします.

4

1 に答える 1

1

子要素ごとに、親要素でイベントを発生させます。

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