Question

我想创建一个包含4列的表，但只显示3列。所以我理想情况下有一个跨越3列的div并应用溢出：隐藏。单击按钮，我希望第3列（公司2）向左滑动，并替换为第4列（公司3），以便公司3与公司1进行比较。如果再次单击该按钮，公司3应该向左滑动，但公司2应从右侧滑动并返回原来的位置。这样做的原因是因为在移动视图中我们无法适应所有列。

小提琴可以在这里找到： https://jsfiddle.net/smks/U7JHM/197/

HTML

<div class="div-table">
    <div class="div-table-row header-row">
        <div class="div-table-col header-row">&nbsp;</div>
        <div class="div-table-col header-row">company 1</div>
        <div class="div-table-col header-row">company 2</div>
        <div class="div-table-col header-row">company 3</div>
    </div>
    <div class="div-table-row">
        <div class="div-table-col">Comparison 1</div>
        <div class="div-table-col">yyy</div>
        <div class="div-table-col">yyy</div>
        <div class="div-table-col">yyy</div>
    </div>
    <div class="div-table-row">
        <div class="div-table-col">Comparison 2</div>
        <div class="div-table-col">yyy</div>
        <div class="div-table-col">www</div>
        <div class="div-table-col">yyy</div>
    </div>
    <div class="divRow">
        <div class="div-table-col">Comparison 3</div>
        <div class="div-table-col">uuu</div>
        <div class="div-table-col">Mkkk</div>
        <div class="div-table-col">yyy</div>
    </div>
</div>
<br>
<button>Compare Next</button>

CSS

.div-table{
  display:table;         
  width:auto;                 
  border:1px solid  #666666;         
  border-spacing:5px;/*cellspacing:poor IE support for  this*/
  padding: 0;
  text-align: center;
}
.div-table-row{
  display:table-row;
  width:auto;
  clear:both;
  padding: 5px;
}
.div-table-col{
  float:left;/*fix for  buggy browsers*/
  display:table-column;         
  width:200px;  
  border:1px solid  #666666;
  padding: 5px;
}
.header-row {
    height: 50px;
}

Answer 1

这是一种快速而又肮脏的方式 - 首先我将类应用到第三个和第四个cols，然后将第四个动画设置为隐藏，持续时间为1，以便立即发生。然后，每次按下按钮，我都会切换第3列和第4列。

$(document).ready(function () {
    $(".c4").animate({
        width: 'toggle',
        opacity: 'toggle'
    }, 1); 
    $("button").click(function (event) {
        event.preventDefault();
        $(".c3, .c4").animate({
            width: 'toggle',
            opacity: 'toggle'
        });      
    });
});

更新了小提琴：https://jsfiddle.net/U7JHM/202/

表列滑块交替

1 个答案: