Question

我正在使用Bootstrap来创建响应列。我想要的是当用户点击左箭头或右箭头时，下一列内容从左或右滑入，具体取决于用户是向左还是向右单击。

我看到如何使用固定宽度列进行此操作：http://jsfiddle.net/nheldman/GB7Hc/3/

但是如何使用响应宽度列进行操作？

<div class="row">
<div class="col-md-1 arrow"><i class="fa fa-chevron-left"></i></div>
<div class="col-md-3">
<div class="country"><a href="">Afghanistan</a></div>
<div class="country"><a href="">Albania</a></div>
<div class="country"><a href="">Algeria</a></div>
<div class="country"><a href="">Andorra</a></div>
<div class="country"><a href="">Angola</a></div>
<div class="country"><a href="">Antigua</a></div>
</div>
  <div class="col-md-3">
<div class="country"><a href="">Argentina</a></div>
<div class="country"><a href="">Armenia</a></div>
<div class="country"><a href="">Australia</a></div>
<div class="country"><a href="">Austria</a></div>
<div class="country"><a href="">Azerbaijan</a></div>

</div>
  <div class="col-md-3">
<div class="country"><a href="">Bahamas</a></div>
<div class="country"><a href="">Bahrain</a></div>
<div class="country"><a href="">Bangladesh</a></div>
<div class="country"><a href="">Barbados</a></div>
<div class="country"><a href="">Belarus</a></div>
<div class="country"><a href="">Belgium</a></div>
</div>

 (would like to have other columns of countries here)

<div class="col-md-1 arrow"><i class="fa fa-chevron-right"></i></div>

</div>

Answer 1

在演示中，您通过固定152

为其提供动画

$('.table-container').animate({scrollLeft:'+=152'}, 'slow');

所以你的任务是在DOM准备就绪，窗口调整大小以跟踪col-md-3宽度：

$(function(){ // DOM IS NOW READY

    var $colMD3 = $('.col-md-3'); // Cache your selector!
    var colW;

    function getColW(){
       colW = $colMD3.outerWidth(true);
    }
    getColW(); // on DOM ready - get the width
    $(window).resize( getColW ); // but also on resize

    // OTHER CODE HERE

});

并且您的点击次数应该如下：

 // OTHER CODE HERE
 $('#previous-column, #next-column').click(function(event) {
    event.preventDefault();
    var np = this.id.match("next") ? "+=" : "-=" ;
    $('.table-container').stop().animate({scrollLeft: np+colW}, 800);        
 });

响应列水平滑动

1 个答案: