单击时使用jquery更改css不会恢复对象的原始css
首先，感谢所有花时间看这篇文章的人。第二，如果这是最基本的东西，我很抱歉。不管怎样，问题是:在我的项目组合网站(www.henrykember.com)的菜单页面上，有一些按钮可以根据项目缩略图是日常工作("9-5")还是副业("5-9")来隐藏和重新洗牌项目缩略图。要再次显示所有内容，请单击“全部”。点击这些按钮会改变css (“页边距-顶部”，“页边距-左边距”)，因此当所有"9-5“项目都被隐藏时，通常在页面下方的"5-9”项目会出现在顶部。但有一个小问题:当单击"5-9"，然后是“全部”(按特定顺序)时，一些"5-9“项目不会返回到它们原来的css。这些不是实际的按钮，只是可点击的列表项。这是一个问题吗?这里是我的js：
$(文档)函数(.ready(){
var fivetonine = $("#fivetonine");
var ninetofive = $("#ninetofive");
var all = $("#all");
var business = $(".business");
var casual = $(".casual");
fivetonine.on('click', function () {
casual.show(200);
business.hide(200);
$("a#subsub").css("margin-top", "200px");
$("a#housework").css("margin-top", "160px");
});
fivetonine.off('click', function () {
business.show(200);
casual.show(200);
});
ninetofive.on('click', function () {
business.show(200);
casual.hide(200);
$("a#archive").css("margin-top", "500px");
$("a#subsub").css("margin-top", "930px");
$("a#housework").css("margin-top", "1170px");
});
ninetofive.off('click', function () {
business.show(200);
casual.show(200);
});
all.on('click', function () {
business.show(200);
casual.show(200);
$("a#subsub").css("margin-top", "930px !important");
$("a#housework").css("margin-top", "1170px");
$("a#archive").css("margin-top", "1790px");
});
all.off('click', function () {
business.show(200);
casual.show(200);
});})；
回答 2
Stack Overflow用户
发布于 2020-10-08 00:41:27
首先，这与它不是一个按钮而是一个列表项的事实无关。
其次，我发现您的站点在项目展示中使用了绝对定位。这是一个大禁忌。我建议您学习css-grids和flex-box，并将其中之一集成到您的项目中。这将使你的生活变得容易得多，因为你不需要弄乱边际等等，因为你的项目将被动态定位。
我知道我的回答不是很详细，但我希望这对你有帮助。要点:了解css-grid和flex-box
Stack Overflow用户
发布于 2020-10-08 06:46:04
如果你感兴趣，我创建了一个简单的bootstrap网格布局解决方案。
在head部分中包含引导css：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">加载jQuery js库后，在head部分包含bootstrap js
<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>Basic两列布局：
<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>- 第1列和第2列中.ntf和.ftn div元素的数量和顺序由您决定。
- 在演示中，我向这些随机放置的div添加了颜色，以便更容易地看到两种不同的内容类型。
- 通过调整每个.ntf/.ftn div的
中内容的上/下、左/右边距，您可以获得更随机的内容外观
Javascript:
$(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);
});
});- 我在所有动画上都有半秒(500)的延迟，你可以根据需要进行调整。
如果您希望每个元素的转换时间都是随机的，那么可以用getRandomInt(100,500)替换500，并在脚本中包含如下所示的简单随机数函数
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}https://stackoverflow.com/questions/64247793
复制相似问题
腾讯云开发者
