Jquery - 要素がオーバーフローによって隠されているかどうかを検出する方法：hidden;コンテナ？

Question

私はこの問題を抱えていますが、コンセプトレベルの理解は、与えられた要素がコンテナの外にあるかどうかを検出できますか？ここで

は、私たちが何をしたいの文脈だ：

レッツ・画像我々は、マウス・ホバー項目3のとおりです。

我々が通常持っている：このように

item 1 
item 2 
item 3 - sub 3.1 
     - sub 3.2 

を、サブ3.2はアウトになります（オーバーフローではなくコンテナにclearfixを使用すると、他のページの内容にドロップされます）、これを解決するには、これを解決するために、マウスを動かすアイテム3：

item 1 
item 2 - sub 3.1 
item 3 - sub 3.2 

これを実行するには、要素がフローから外れているかどうかを検出し、すべての要素をXpxにプッシュする必要があります。

これを解決するにはどうすればよいですか？フローの外にある要素があるかどうかを検出するにはどうすればよいですか？

これは良いアプローチではない場合は、もう1つお勧めしますか？

ps-私たちはjqueryメニューソリューションとしてsuperfishを使用しています。

Answer 1

あなたは、単にすべてを表示したい場合は、あなたが説明したとおりにbottom:?pxとposition:relativeとalign:bottomまたはposition:absoluteとCSSであなたが遠くまで行く事を心配しなければならないがそれを行うことができます。

Answer 2

純粋なCSSソリューションが必要な場合や、間違ったプラグインを使用した場合、疑問符はそのようにタグ付けされています。 自分でスーパーフィッシュを使用したことはありませんでしたが、チェックアウトしましたこのサイトの「垂直スタイル」の例：http://users.tpg.com.au/j_birch/plugins/superfish/

したがって、アイテム3をマウスオーバーすると、項目1のレベルでサブ3.1が表示されますか？このプラグインのコードに簡単に見てとった後 私はこのように終わるライン持っている）あなたは、単にshowSuperfishUlを（変更する必要があると信じて：あなたのアイテムや潜水艦が同じ高さと仮定すると、

.find('>ul:hidden').css('visibility','visible'); 

を、コンテキストを交換します$（この）で、あなたはこれらの線に似た何かを追加することができます：あなたはそれが本当のコンテキストで動作するかどうかを調べるために、実際のページセットアップする必要があります

if($(this).parent().nextAll().length < $(this).children("li").length) // lower space < subs heights ? 
{ 
    var totalHeight=0; 
    $(this).parent().prevAll().each(function(index) 
    { 
     if(index < $(this).children("li").length) // without this you would have all subs at the level of item 1 
     { 
      totalHeight += $(this).outerHeight(true); // true for margins 
     } 
    }); 
    ... .css("top","-"+totalHeight+"px"); 
} 

を... 「トップ」意志おそらくありませんこの相対的/浮動小数点：左のレイアウトで作業しますが、ほぼ概念レベルの "概念レベル"になります。