-1

这让我发疯：我有一个水平滑动三个 div 的小 jquery。

小提琴

编辑3： 现场演示；完整的网站显示我希望它如何工作..直到我低于 775 像素。请调整窗口大小以了解我的意思。

编辑，应大众需求。我想要什么：在小屏幕上，比如 700 或以下。我想要一个面板来填满屏幕。一次。

第二次编辑： 它在 700 像素以上工作正常。在此之下；我希望屏幕一次只显示一个面板，并且在需要时（单击当前面板），下一个面板将侧向滑动。即没有堆叠的列，这是经典的响应式设计。请参阅小提琴。在您最小化浏览器窗口或使用移动设备之前，一切都很好。

我将 panel1 和 panel2 定义为fixed width，并使用 css calc 将第三个面板保持在 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 像素以下，您的列将堆叠（100% 屏幕宽度），由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()某些浏览器会触发两次，请参阅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>

javascript（新）

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 （新！！）

于 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 回答