jQuery切换元素位置_Jquery_Html_Css

jQuery切换元素位置

jquery html css

jQuery切换元素位置,jquery,html,css,Jquery,Html,Css,试图让jQuery切换某个元素的位置，以便通过单击事件隐藏和显示它。我的类有一个position属性：absolute和left:9000em（让它远离屏幕）。然后我想添加另一个属性为left:0的类，以将元素重新显示在屏幕上。它不起作用。使用jquery1.11.3。这是我的HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

试图让jQuery切换某个元素的位置，以便通过单击事件隐藏和显示它。我的类有一个position属性：absolute和left:9000em（让它远离屏幕）。然后我想添加另一个属性为left:0的类，以将元素重新显示在屏幕上。它不起作用。使用jquery1.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>

还有我的jQuery

$("document").ready(function() {

     $("#toggle").on("click", function(evt) {

        $(".background").toggleClass("active");

      });

});

您的jQuery很好，只需将css更改为更具选择性：

.background.active {
    left: 0; 
}

和您的工作小提琴：

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

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

演示：

哇，谢谢。我太专注于我的jQuery是错误的，我忘记了我的css！

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

.active
{
    left:0 !important
}

prioritize your left:0 with !important.