jquery - 堆叠奇数个选项卡 - jquery/css

Question

我有 5 个选项卡，在移动设备上，我想将它们堆叠在一起，奇数选项卡位于顶部而不是底部。目前我将它们设置为容器宽度的 50% 并向左浮动，但当然它们首先填满顶部。

<div class="tab-row">
  <button class="tab active">A</button>
  <button class="tab">B</button>
  <button class="tab">C</button>
  <button class="tab">D</button>
  <button class="tab">E</button>
</div>

这是目前的代码处理选项卡选择:

$(".tab").click(function() {


  // All versions
  $(".tab").removeClass("active");
  $(".tab").show();
  $(".clone").remove();

  // mobile version does clone thing rather than moving $(this) in order to preserve original order of inactive tabs

  if(window.matchMedia("(max-width: 1100px)").matches) {
     $(this).clone().addClass("clone active").insertAfter(".tab-row button:last-of-type");
     $(this).hide();
  }
  // full width
  else { $(this).addClass("active"); }

  // code to load the tab content elided

  });

(当它在移动设备上加载时，有一些单独的代码将选项卡 A 放在底部。)

在早些时候处理这​​个问题时，IIRC 通过设置一个 clear: 获得了一些进展，但是整个克隆 js 把它搞砸了，所以它并不总是按照我想要的方式工作。我不知道是我做错了，还是走那条路不可行？

我觉得答案一定很明显，但我想不出来...提前致谢!

有用的插图位于 /image/ttNwW.png .

Answer 1

您可以使用 display:flex 和 flex-wrap: wrap-reverse;

$(".tab").click(function() {


  // All versions
  $(".tab").removeClass("active");
  $(".tab").show();
  $(".clone").remove();

  // mobile version does clone thing rather than moving $(this) in order to preserve original order of inactive tabs

  if(window.matchMedia("(max-width: 1100px)").matches) {
     $(this).clone().addClass("clone active").insertAfter(".tab-row button:last-of-type");
     $(this).hide();
  }
  // full width
  else { $(this).addClass("active"); }

  // code to load the tab content elided

  });

.tab-row{
    max-width:100px;
  background-color: DodgerBlue;
  display: flex;
  flex-wrap: wrap-reverse;
}

.tab{
  width:35px;
  margin:5px;
  align-self:flex-end;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-row">
  <button class="tab active">A</button>
  <button class="tab">B</button>
  <button class="tab">C</button>
  <button class="tab">D</button>
  <button class="tab">E</button>
</div>

您也可以在这里进行测试.. https://jsfiddle.net/kt39Lp71/1/