1

Twitter ブートストラップ スパンを使用して、グリッド レイアウトで 2 つの列を形成しています。ユーザーが一番左のスパンを閉じて、右のスパンがビューポートを埋めるようにしたいと考えています。左パネルを非表示にして右パネルの幅を変更することでこれを行いましたが、うまく機能します。ただし、左パネルのスライドを閉じて、右パネルの幅を変更して残りのスペースを埋めることをお勧めします。これまでに思いついた最高のものは次のとおりです。

if ( show )
    $('.content-panel').css( { width: '76.6%' } );

$('.left-panel').animate( {width: 'toggle'}, function(){
    if ( !show )
        $('.content-panel').css( { width: '100%' } );
});

.content パネルは右側の列です。この種の作品はかなりぎこちなく見えます。両方のスパンを一緒にサイズ変更する必要があります。どんな提案でも大歓迎です。

4

3 に答える 3

4

楽しみのために、Voodoo の例をハックし、Javascript を使用してクラスを操作し、次に CSS トランジションを使用してアニメーションを管理しました: http://jsfiddle.net/WDV69/29/

必ずしもより良い解決策ではなく、単に異なるだけです。

私のJavaScriptが少し荒い場合はお詫び申し上げます。それは実際には私の部門ではありません。

$("#closeTrigger").click(function() {

$('.container').removeClass('openLeft').addClass('closeLeft');  
});

$("#openTrigger").click(function() {
$('.container').removeClass('closeLeft').addClass('openLeft');  
});
于 2013-01-04T02:54:26.810 に答える
4

これは、あなたが望むものを達成すると思われる簡単な解決策です。ここでフィドルを参照してください。

幅の Bootstrap スパン クラスから開始し、クリックすると、右側のボックスの幅の拡大をアニメーション化し、左側のボックスのサイズを縮小してから完全に非表示にします。アニメーションが完成したら、span12 を追加してみました。

$("#moveTrigger").click(function() {
  // Left box animates to 0 width
  $(".leftbox").animate({ "width": "0%" }, "slow", function() {
    // Hide when width animation finishes
    $(this).hide();
  });
  // Right box expands. Tinkered with add span12 after animation is complete
  $(".rightbox").animate({ "width": "90%" }, "slow", function() {
    $(this).removeClass('span6').addClass('span12').css('width','');
  });
});​

これにはおそらくいくらかの改良が必要ですが、効果は達成されます。

于 2013-01-03T11:13:28.203 に答える
0

要求に応じて、応答性の高い別のソリューション:
http://jsfiddle.net/panchroma/pwP5V/

繰り返しますが、これは @Voodo によって開始された JavaScript に基づいています。

メディアリクエストを使用してアニメーションを管理するため、CSS を見ると、次のような設定がたくさん表示されます。 

@media (max-width: 480px) {
.to-hide {
background-color: yellow;  
}
....
}

まだ微調整が必​​要ですが、一部の設定は左右の列の相対的な高さに依存する可能性があるため、この時点で実際のコンテンツで遊ぶ必要があると思います.

カスタマイズに終わりはありません。たとえば、最も狭いウィンドウでクローズがどのように機能するかを確認します。トランジションのタイミングは、開くときと閉じるとき、およびさまざまなウィンドウ サイズに対してカスタマイズすることもできます。

ここには、しばらく続けるのに十分な量があるはずです!

于 2013-01-06T03:41:38.963 に答える