jQuery切换元素位置
问题描述:
试图让jQuery切换某个元素的位置,以便通过点击事件隐藏和显示它。我从我的班级开始,拥有一个位置属性:绝对值和剩余值:9000em(保持屏幕不变)。然后,我想添加另一个具有left:0属性的类,将元素重新显示在屏幕上。它不工作。使用jQuery 1.11.3。这是我的HTMLjQuery切换元素位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<section>
<button id="toggle">Hello there</button>
<div class="background">
</div>
</section>
</body>
</html>
我的CSS
.active {
left: 0;
}
.background {
position: absolute;
left: 9000em;
background-color: lightgray;
width: 500px;
height: 100px;
}
和我的jQuery
$("document").ready(function() {
$("#toggle").on("click", function(evt) {
$(".background").toggleClass("active");
});
});
答
答
如果您编写.background样式的AFTER .active样式,它将覆盖“left”指令。你可以在你的.background类后写入你的css中的.active风格。
.background {
position: absolute;
left: 9000em;
}
.active {
left: 0;
}
+0
这也工作谢谢你。 – Jason
答
.active
{
left:0 !important
}
prioritize your left:0 with !important.
哇,谢谢。我很专注于我的jQuery错了我忘了我的CSS! – Jason