试图让 jQuery 切换某个元素的位置，以便我可以通过单击事件隐藏和显示它。我从我的类开始，它有一个属性 position: absolute 和 left: 9000em(让它远离屏幕)。然后我想添加另一个具有 left: 0 属性的类，以将元素带回屏幕。它不工作。使用 jQuery 1.11.3。这是我的 HTML
<!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");
});
});
最佳答案
您的 jQuery 没问题，只需更改您的 css 使其更具选择性:
.background.active {
left: 0;
}
还有你的工作 fiddle :http://jsfiddle.net/u9a26crc/
关于jQuery 切换元素位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32893967/