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"); 

     }); 

});

来源

2015-10-01 Jason

你jQuery是很好，只是改变你的CSS了更多的选择：

.background.active { 
    left: 0; 
}

而你的工作小提琴：http://jsfiddle.net/u9a26crc/

来源

2015-10-01 18:03:11 pgruber

哇，谢谢。我很专注于我的jQuery错了我忘了我的CSS！ – Jason

如果您编写.background样式的AFTER .active样式，它将覆盖“left”指令。你可以在你的.background类后写入你的css中的.active风格。

.background { 
    position: absolute; 
    left: 9000em; 
} 
.active { 
    left: 0; 
}

来源

2015-10-01 18:05:39 gmast

这也工作谢谢你。 – Jason

.active 
{ 
    left:0 !important 
} 

prioritize your left:0 with !important.

DEMO：https://jsfiddle.net/735mmLqf/

来源

2015-10-01 18:08:18

jQuery切换元素位置

回答

相关问题