0

興味深い問題に遭遇しました。メニューのdiv周りのコンテナです。

メニューに設定overflow : hiddenすると、オーバーフローするメニューの部分が非表示になります。

それらを非表示にする代わりに、「グループ リスト」メニュー フライアウトのサイズを単純に変更して、メニュー内に収まるようにしたいと考えています。

ここにフィドルがあります：http://jsfiddle.net/uW9nG/

フィドルでは、 mouseOver Aにすると、青いコンテナーの上に飛び出します。オーバーフローを切り替えると、オーバーフローが非表示になります。

コンテナに収まるようにグループリストのサイズを単純に変更してオーバーフローさせるにはどうすればよいですか?

（私は午前中ずっとこの計算に取り組んできましたが、完全には理解できません..）

4

2 に答える 2

1

私はあなたのフィドルを分岐させ、解決策を思いつきました。コンテナとフライアウトの上部の位置を見つけて、違いを見つけ、その値でフライアウトを相対的に配置します。また、リスト アイテムの高さを 20px にハード コードするように変更する必要がありました。そうしないと、リスト アイテムの幅が変更されてしまいます。

var groupListTop = groupList.offset().top;
var containerTop = $('#container').offset().top;
if(groupListTop < containerTop) {
    var diff = containerTop - groupListTop;
    groupList.css({
        position: 'relative',
        top: diff
    })
}
于 2012-10-30T21:58:49.430 に答える
1

あなたgroupListには現在 が与えられていますが、それを作成してから -50px に引き上げるmargin-top方が簡単です (下に押した 50px に一致させるためです。フィドルを参照してください。position:absolute<ul id='test-two'>

groupList.css({
    'top': '-50px',
    'position': 'absolute'
});

が配置されていない場合は、 に0px を指定#test-twoできます。groupListtop

于 2012-10-30T22:08:06.410 に答える