0

こんにちは、私はいくつかのことを達成しようとしています。

マウスオーバーで表示される要素があります。これは基本的にサブメニューですが、「li」要素内にないという点で、従来のサブメニューのように構造化されていません。私がやろうとしているのは、ユーザーが「製品」にカーソルを合わせると、サブナビが表示されることです-これは問題なく機能します。ただし、ユーザーがマウスを「製品」からサブナビゲーション メニュー自体に移動すると、サブメニューが残り、両方の要素 (a#products と #banner-top) がマウスオーバーしなくなるまで消えないようにします。

私の目的に合うように聞こえたので、現在これを達成するために hoverintent を使用しています。.hoverintent が接続されている要素の 1 つにユーザーがホバリングしている限り、「out」は呼び出されないという印象を受けました。また、ユーザーが「#product-sub-nav」を表示するようにトリガーした最初の要素から離れた場合でも、「out」はトリガーされないだろうと想定しました。言い換えれば、ユーザーはサブメニューが表示される「製品」にカーソルを合わせると、ユーザーはサブメニューに短時間カーソルを合わせると、「非表示」クラスをサブナビにアタッチして再び非表示にする機能がトリガーされません。私がやろうとしていることをうまく説明できたことを願っています。

これが私のコードです

    var settings = {
                sensitivity: 4,
                interval: 75,
                timeout: 500,
                over: mousein_trigger,
                out: mouseout_trigger
            };

            jQuery('.item-134 a, #product-sub-nav').hoverIntent(settings);

            function mousein_trigger() {
                jQuery('#banner-top').removeClass('hidden')
            }
            function mouseout_trigger() {
                jQuery('#banner-top').addClass('hidden')
            }

JS FIDDLE で更新

http://jsfiddle.net/M5BN2/

4

1 に答える 1

1

他の誰かが同様の問題を抱えている場合に備えて、これを更新したかっただけです。このソリューションは完全に機能します: https://stackoverflow.com/a/1670561/1108360

jQuery(".item-134 a, #banner-top").mouseenter(function() { //if mouse is over 'products' link or submenu
                //clear timeout
                clearTimeout(jQuery(this).data('timeoutId'));
                //display sub menu
                jQuery('#banner-top').removeClass('hidden');
            }).mouseleave(function() { //when mouse leaves element
                timeoutId = setTimeout(function() {
                    //delay hiding sub menu
                    jQuery('#banner-top').addClass('hidden');
                }, 650);
                //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
                jQuery(".item-134 a, #banner-top").data('timeoutId', timeoutId);
            });

JSfiddle を適切に更新しませんでした: http://jsfiddle.net/M5BN2/5/

于 2013-10-31T15:21:43.930 に答える