Question

这让我很生气：我有一点点jquery横向滑动三个div。

FIDDLE

编辑3： Live demo; complete website showing how I want it to work .. 直到我的价格低于775px。请调整窗口大小以查看我的意思。

编辑，受欢迎的需求。我想要的是：在小屏幕上，比如从700和下来。我想要一个面板填满屏幕。一次。

2ND编辑：在700px以上可以正常工作。在那之下;我希望屏幕一次只显示一个面板，当需要时（点击当前面板），下一个面板将向侧面滑动。即没有堆叠的列，这是经典的响应式设计。请看小提琴。在您最小化浏览器窗口或使用移动设备之前，这一切都很好。

我将panel1和panel2定义为fixed width，并使用css calc将第三个面板保持为100％减去panel1（200px）和panel2（200px）：(calc 100% - 400px)

这很好用，直到我进入小屏幕。然后它变得混乱：面板垂直堆叠在一起（我想隐藏面板不活动），并且由于固定的宽度，我“看到”右边的一小块压扁面板。理想情况下，我希望每个面板100％填充小屏幕。

我需要帮助的是：

我必须

找到一种方法将像素滑动距离的JS定义替换为％

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

..因此能够做我的css计算（100％ - 20％）或类似的东西。

..或者，至少在小屏幕中找到隐藏面板的方法。

所有指针都非常感激。

Answer 1

您可以在此处详细了解TB3网格：http://getbootstrap.com/css/#grid

另请阅读：Twitter's Bootstrap mobile: more columns和Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

<击> 您将需要以下内容：

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

Answer 2

根据我对您的问题的理解，您遇到了panel3的问题。您可以使用以避免此类烦恼。检查live demo

.panel1, .panel2, .panel3
{
    float: left;
    height: 800px;
    padding: 5px ;
    overflow: none;
}

如何使JS水平内容从px滑动到％响应

2 个答案: