主页 / 问题 / 895043
Accepted
Tick-Tack
Asked:2020-10-19 05:25:42 +0000 UTC2020-10-19 05:25:42 +0000 UTC

减小窗口宽度时将列表的最后一个元素放在首位

  • 772

有一个列表，在某个窗口宽度处，您需要将最后一个元素放在首位。我这样做：

if ($(window).width() < 500) {
  $('.header_bar').prepend($('.header_bar li:last'));
} else {
  $('.header_bar').append($('.header_bar li:last'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="header_bar">
  <li><a href="#" class="text">SERVICES</a></li>
  <li><a href="#" class="text">WORK</a></li>
  <li><a href="#" class="text">TEAM</a></li>
</ul>

但它只有在我设置宽度并刷新页面时才有效。当窗口宽度发生变化时如何让它立即工作？（如果有没有js的选项，我会很高兴听到）

javascript

2 个回答

  1. Best Answer

    .header_bar {
  display: flex;
  flex-direction: column;
}
.header_bar li {
  order: 2;
}
@media (max-width: 320px) {
  .header_bar li:last-child {
    order: 1;
  }
}
    <ul class="header_bar">
  <li><a href="#" class="text">SERVICES</a></li>
  <li><a href="#" class="text">WORK</a></li>
  <li><a href="#" class="text">TEAM</a></li>
</ul>

    通过单击“展开片段”或在沙箱中调整输出帧的大小，在全屏模式下进行测试。

    • 5

  2. 很明显，这将适用于每个resize. 尝试保持最后一个大小并仅在大小发生变化时才对元素进行洗牌，其中任一侧超过 500。

    $(window).resize(function() {
  if ($(window).width() < 500) {
    $('.header_bar').prepend($('.header_bar li:last'));
  } else {
    $('.header_bar').append($('.header_bar li:last'));
  }
});
$(window).resize();
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="header_bar">
  <li><a href="#" class="text">SERVICES</a></li>
  <li><a href="#" class="text">WORK</a></li>
  <li><a href="#" class="text">TEAM</a></li>
</ul>

    • 2

相关问题