1

私は、訪問者がパネルを閉じずにそれぞれを「ワンクリック」できるようにリストされた Google+、Facebook、Youtube、および Twitter ソーシャル ウィジェットを含むホバー ドロップダウン パネルに取り組んでいます。

シンプルな jquery ドロップダウン メニューから始めて、それを 1 つの ul li div に単純化したので、1 つのメニュー項目 (Socialize) にマウスを合わせると、4 つのソーシャル ウィジェットすべてを含む div が表示されます。ここまでは順調ですね。単一のメニュー項目または 4 つのソーシャル ウィジェットを含む div の上にカーソルを置いている限り、表示されたままになり、div の外に移動すると非表示になります。

私が抱えている問題は、Google+ ウィジェットに [フォロー] ボタンがあり、マウスオーバーすると、独自の小さなドロップ メニューが開き、選択するサークルを選択できることです。この Google+ ドロップ メニューが表示されると、適切な用語がないために親 div が「フォーカス」を失い、含まれている div が非表示になります。Google+ ウィジェットにドリルダウンして、いくつかの div を手動で選択して、単純な jquery ドロップダウン スクリプトに追加しようとしましたが、うまくいきませんでした。

Google+ウィジェットの[フォロー]ボタンにカーソルを合わせたときに、含まれているdivを開いたままにする方法を知っている人はいますか?

これが私の単純なjqueryです。

$(function(){
    $('ul.dropdown li').hover(function(){
        $(this).addClass("hover");
        $('ul:first',this).css('left', '-200px');
        //$('ul:first',this).css('display', 'block');

    }, function(){
        $(this).removeClass("hover");
        $('ul:first',this).css('left', '-2000px');
        //$('ul:first',this).css('display', 'none');
    });
});

コメントアウトされた 2 行は元の Hide/Show でしたが、非表示の div でウィジェットが適切に読み込まれないという問題があったため、表示したままにし、ビューポートの横から単にシャッフルすることにしました。個別の問題全体。親DIVが消える原因となるGoogle+フォローボタンのマウスオーバーを解決するだけです。

編集：さらに明確にするためのサイトです。 http://www.lawncaremarketingexpert.com/

4

1 に答える 1

0

Google+ div のマウスオーバー イベント内で「event.stopPropagation()」を使用できます。このようなもの：

$('<Google+ div selector>').mouseover(function(e){
 e.stopPropagation();
});

回避策:

$('<Google+ div selector>').mouseover(function(e){
     jQuery('<parent dropdown panel selector>').show();
  });
于 2013-09-05T05:55:52.377 に答える