5

次のコードは、メガ ドロップダウンの表示と非表示に使用されます。「dropDown」クラスのリンクにマウスオーバーすると、その子「.dropPanel」が表示されます。マウスがリンクまたはドロップ パネルの上にある限り、ドロップ パネルは表示されたままになります。リンクまたはパネル以外の場所にカーソルを移動すると、パネルが非表示になります。かなり基本的なもの。

これらのメガ ドロップダウンのいくつかには、select 要素を含むフォームがあります。Firefox では、すべて問題ありません。IE (特に 8 では他のバージョンはテストしていません) では、ドロップ パネルの選択要素にマウスを合わせると、hoverIntent が dropPanelOff() の「out」関数を起動し、ドロップ パネルが非表示になります。

これを防ぐにはどうすればよいですか？

        // Apply Hover Intent to Menu Panels
        $(".dropDown").hoverIntent({
            sensitivity: 10, 
            interval: 150, 
            over: dropPanelOn, 
            timeout: 150, 
            out: dropPanelOff
        });

            // Menu Over function call
            function dropPanelOn() {
                $('a[rel="dropLink"]', this).addClass('hover');
                $('.dropPanel', this).slideDown('fast');
            }

            // Menu Out function call
            function dropPanelOff() {
                obj = this;
                $('.dropPanel', this).slideUp(100, function(){
                    $('a[rel="dropLink"]', obj).removeClass('hover');
                    $('.dropLink span', obj).removeClass('hover');
                });
            }
4

2 に答える 2

6

これをコードに追加してみてください：

$(".dropDown select").mouseout(function(e) {
        e.stopPropagation();
});
于 2011-02-15T02:21:40.760 に答える
0

ネイティブのホバーイベントを使用する必要があるかもしれません。それに遅延を追加することもできます。

var time = false;
$(".dropDown").hover(function () {
   if ($("dropPanel", this).is(":hidden")) $("dropPanel", this).slideDown('fast');
   else window.clearTimeout(timer);
}, function () {
   var obj = $(this);
   timer = window.setTimeout(function () {obj.slideUp(100);}, 150);
});
于 2010-12-01T12:14:13.453 に答える