-1

これは私を怒らせています.3つのdivを水平にスライドさせる小さなjqueryがあります。

フィドル

編集 3: ライブ デモ; 私がどのように機能させたいかを示す完全なウェブサイト.. 775px未満になるまで。ウィンドウのサイズを変更して、意味を確認してください。

編集、一般的な要求による。私が欲しいもの：小さな画面では、700以下から言ってください。画面いっぱいに 1 つのパネルが必要です。一度に。

2 番目の編集: 700px 以上で問題なく動作します。その下; 画面に一度に 1 つのパネルのみを表示したいのですが、必要に応じて (現在のパネルをクリック)、次のパネルが横にスライドします。つまり、従来のレスポンシブ デザインである積み重ねられた列はありません。フィドルを参照してください。ブラウザ ウィンドウを最小化するか、モバイル デバイスを使用するまでは問題ありません。

panel1 と panel2 を として定義しfixed width、css calc を使用して、3 番目のパネルを 100% マイナス panel1 (200px) と panel2 (200px) に保ちます。(calc 100% - 400px)

小さな画面に入るまで、これは問題なく機能します。次に、それは面倒です：パネルは垂直に積み重ねられ（アクティブでないパネルを非表示にしたい）、幅が固定されているため、押しつぶされたパネルの小さなビットが右側に「見えます」。理想的には、各パネルが小さな画面を 100% 埋めたいと思っています。

私が助けを必要としているのはこれです：

私はどちらかでなければなりません

  1. ピクセルのスライド距離のこの JS 定義を % に置き換える方法を見つけてください

 var margins = {
        panel1: 0,
        panel2: -200,
        panel3: -400,               
    }

..したがって、css calc (100% - 20%) などを実行できます。

  1. ..または、少なくとも、小さな画面でパネルを非表示にする方法を見つけてください。

すべてのポインタは大歓迎です。

4

2 に答える 2

1

TB3 グリッドの詳細については、http: //getbootstrap.com/css/#gridを参照してください。

また読む：TwitterのBootstrapモバイル：より多くの列とTwitterのBootstrap 3グリッド、ブレークポイントの変更とパディングの削除

次のようなものが必要になります。

<div class="row">
<div class="col-sm-4">
<div class="panel">Panel 1</div>
</div>

<div class="col-sm-4">
<div class="panel">Panel 2</div>
</div>

<div class="col-sm-4">
<div class="panel">Panel 3</div>
</div>
</div>

768 ピクセルより下では、col-sm-4. 767 ピクセルより上では、メディア クエリを使用してパネルに固定幅を与えることができます。

@media (min-width: 768px)
{
.panel {width:200px}
}

以下の（コメントに基づく）更新。

これを試してください：http://bootply.com/73541

CSS

@media (max-width: 767px)
{

#panel1 {visibility:visible}
#panel2 {visibility:hidden}
#panel3 {visibility:hidden}
}   
@media (min-width: 768px)
{
    #menu {visibility:hidden}
}

JavaScript

function showandhide(show)
{
    $('.panel').hide();
    $('#' + show).css('visibility','visible').slideDown("slow");
}   


$('.panellink').click(function()
{

    showandhide($(this).attr('rel'))
    return false;
} );

html

<div id="menu" class="row">
  <div class="col-12">
    <a class="panellink" rel="panel1" href="">panel 1</a> |
    <a class="panellink" rel="panel2" href="">panel 2</a> |
    <a class="panellink" rel="panel3" href="">panel 3</a> 
  </div>
</div>  
<div class="container">
<div class="row">
<div class="col-sm-4 col-lg-4">
<div id="panel1" class="panel">Panel 1</div>
</div>

<div class="col-sm-4 col-lg-4">
<div id="panel2" class="panel">Panel 2</div>
</div>

<div class="col-sm-4 col-lg-4">
<div id="panel3" class="panel">Panel 3</div>
</div>
</div>
</div>

応答に基づいて2 を更新します。

1) 767 ピクセルを超えると、すべてのパネルが私の例に表示されます。小さいサイズから大きいサイズに変更する場合は、ページをリロードする必要があります。$(window).resize()一部のブラウザがこれを 2 回起動することに注意してこのリロードをトリガーすることもできます。解決策についてはhttps://stackoverflow.com/a/4298653/1596547を参照してください。

2）「横にスライドする」ために、これを書き直します：http://jsfiddle.net/ax4AC/2/：

    $('.panel').css('margin-left','-260px').hide();
    $('#' + show).css('visibility','visible');
  $('#' + show).show();
    $('#' + show).animate({
        'margin-left': parseInt($('#' + show).css('margin-left'), 10) == 0 ? -$('#' + show).outerWidth() : 0,
        opacity: "show"
    });

html (新規)

<div id="menu" class="row">
  <div class="col-12">
    <a class="panellink" rel="panel1" href="">panel 1</a> |
    <a class="panellink" rel="panel2" href="">panel 2</a> |
    <a class="panellink" rel="panel3" href="">panel 3</a> 
  </div>
</div>  
<div class="container">
<div class="row">
<div class="col-sm-3 col-lg-3">
<div id="panel1" class="panel">Panel 1</div>
</div>

<div class="col-sm-3 col-lg-3">
<div id="panel2" class="panel">Panel 2</div>
</div>

<div class="col-sm-6 col-lg-6">
<div id="panel3" class="panel">Panel 3</div>
</div>
</div>
</div>

ジャバスクリプト（新）

function showandhide(show)
{
    // source: http://jsfiddle.net/ax4AC/2/

    $('.panel').css('margin-left','-260px').hide();
    $('#' + show).css('visibility','visible');
  $('#' + show).show();
    $('#' + show).animate({
        'margin-left': parseInt($('#' + show).css('margin-left'), 10) == 0 ? -$('#' + show).outerWidth() : 0,
        opacity: "show"
    });



  //.slideDown("slow");
}   


$('.panellink').click(function()
{

    showandhide($(this).attr('rel'))
    return false;
} );

//source timeout: https://stackoverflow.com/a/4298653/1596547
var id; 

$(window).resize(function() 
{


        clearTimeout(id);
        id = setTimeout(doneResizing, 500);



});

function doneResizing()
{


    if($(window).width()>=768)
    {
        $('.panel').css('display','block');
        $('.panel').css('visibility','visible');
        $('.panel').css('margin-left',0);
    }   

}

css (新規)

@media (max-width: 767px)
{
.panel{
    margin-left: -260px;
   }
#panel1 {visibility:visible; margin-left:0}
#panel2 {visibility:hidden}
#panel3 {visibility:hidden}


}   
@media (min-width: 768px)
{
    #menu {visibility:hidden}
    .panel {display:block; visibility:visible; margin-left:0}
}

参照: http://bootply.com/73715 (new!!)

于 2013-08-11T22:41:44.947 に答える
0

あなたの質問から私が理解したことから、あなたは panel3 に問題があります。この種の煩わしさを避けるために使用できます。ライブデモを確認してください

.panel1, .panel2, .panel3
{
    float: left;
    height: 800px;
    padding: 5px ;
    overflow: none;
}
于 2013-08-11T22:42:00.300 に答える