1

ページの読み込み時に非表示になり、ボタンをクリックすると表示されるスライド トグル div があります。div は高さ 250 ピクセルで、上部 0 ピクセルに配置されます。また、同じことを行うボトム100％も試しました。私は z-index のいくつかのレイヤーを使用しており、必要なレイアウトを取得するために絶対を使用していくつかの div を配置する必要がありました。しかし、スライド トグルが表示されたときに、これらすべての div を 250px 押し下げる方法があることを望んでいました。トグル div を使用する代わりに、ページを -250px にスクロールして、すべてのコンテンツが同じように表示されるが、押し下げられるようにする方法があるのではないかと考えていました。

これは、ここで実行できることがある場合に備えて使用している div の css です。

#slidingTopBar
{ 
background:#199651;
display:inline-block;
position: fixed;
height:250px;
width:100%;
left:0px;
top:0px;
z-index:56;
}

トグルのスクリプトは次のように使用されています。

$(document).ready(function(){

$("#slidingTopBar").hide();
$(".show_hide").css('position','absolute').show();

$('.show_hide').click(function(){
$("#slidingTopBar").css('position','absolute').slideToggle();
}); });

トグルは、この html を使用して呼び出されています。

<div id="TopBar"><a href="#" class="show_hide">SHOW</a></div>

既に存在するコンテンツをオーバーレイしているのに、すべてを押し下げたいことを除いて、これはすべて機能しています。

どんな助けでも感謝します。

4

1 に答える 1

0

トグル div またはそのラッパーの直下で clearfix メソッドを使用すると、これを修正できます。

HTML:<div class="clearfix"></div>

CSS:.clearfix { clear: both; }

于 2013-11-13T10:22:12.330 に答える