Javascript 使用jquery更改css时单击“不还原对象”'；s原创css

首先，感谢所有花时间看这篇文章的人。 第二，道歉，如果这是基本的东西。 无论如何，问题是： 在my portfolio站点（）的菜单页面上，有一些按钮可以根据日常工作（“9-5”）或辅助项目（“5-9”）隐藏和重新排列项目缩略图。要再次显示所有内容，请单击“全部”。 单击这些按钮会更改css（“页边空白顶部，页边空白左侧”），因此，当所有“9-5”内容都隐藏时，通常位于页面下方的“5-9”项目会上升到顶部。 但有一个小问题：当点击“5-9”，然后点击“全部”（按照特定的顺序），一些“5-9”项不会返回到它们原来的css。 这些不是实际的按钮，只是可点击的列表项。这有问题吗？ 以下是我的js：

$（文档）.ready（函数（）{

---

})首先，这与它不是一个按钮而是一个列表项这一事实无关

第二，我看到你的网站在项目展示中使用了绝对定位。这是一个很大的禁忌。我建议你学习css网格和flex box，并为你的项目集成其中一个。这将使你的生活更加轻松，因为你不需要弄乱利润等，因为你的项目将被动态定位

---

我知道我的回答不是很详细，但我希望它能对你有所帮助。要点：了解css网格和flex box

如果你感兴趣，我创建了一个简单的引导网格布局解决方案

在头部区域包含引导css：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

• 我将所有动画延迟半秒（500），根据您的需要进行调整

如果您想要每个元素上的随机转换时间，可以将

500

替换为

getRandomInt（100500）

，并在脚本中包含下面显示的简单随机数函数

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

---

不要尝试用边距来乱翻内容，而是尝试类似于，

$（'#parentContainer'）.prepend（$（'.class of elements to move to top'）.detach（）的方法

@Drew感谢你跳到这里来！唉，我不知道什么是前置词。你有没有机会详细说明一下？如果太多的话，不用担心。非常感谢：）我今天下班后会回到这里。太棒了。我对js的知识几乎为零，所以如果有办法让我的js工作，那就太理想了。（如果有不同的方法，我只需要把它说清楚一点！）我的回答与我之前关于使用append的评论方向不同。谢谢@George-我确实使用flex box，但当我重新编辑版面时，我的媒体查询被搞砸了，我选择了vw而不是px-这意味着flex box有点多余。但在每个flex项目中，我都使用了边距和绝对定位；我尝试不使用边距和绝对定位我只是想调整一下我的9-5/5-9选择器，这样网站在短期内就可以运行了（我失业了，当潜在的老板看到我的网站时，我需要它来完成它的工作），但是中期我一定会尝试css网格！谢谢@Drew-这非常有用。我今天要尝试所有这些东西。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div class="row">
  <!-- col 1 -->
  <div class="col-xs-6 d-flex flex-column justify-content-center">
  
    <!-- Nine to Five Item -->
    <div class="all ntf">
        9-5
    </div>
    
    <!-- Five to Nine Item -->
    <div class="all ftn">
        5-9
    </div>
  </div>

  <!-- col 2 -->
  <div class="col-xs-6 d-flex flex-column justify-content-center">
  
    <!-- Nine to Five Item -->
    <div class="all ntf">
        9-5
    </div>
    
    <!-- Five to Nine Item -->
    <div class="all ftn">
        5-9
    </div>
  </div>
</div>

$(document).ready(function(){

    $('.btnAll').on('click', function(){
    $('.all').slideDown(500);
  });
  
  $('.btnNineToFive').on('click', function(){
    $('.ftn').slideUp(500);
    $('.ntf').slideDown(500);
  });
  
  $('.btnFiveToNine').on('click', function(){
    $('.ntf').slideUp(500);
    $('.ftn').slideDown(500);
  });

});

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}