Question

尝试让jQuery切换某个元素的位置，以便我可以通过click事件隐藏和显示它。我开始我的班级有一个位置属性：绝对和左：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");

      });

});

Answer 1

你的jQuery很好，只需改变你的css就可以更具选择性：

.background.active {
    left: 0; 
}

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

Answer 2

如果您编写.background样式AFTER .active样式，它将覆盖＆＃34; left＆＃34;指示。您可以在.background类之后在css中编写.active样式。

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

Answer 3

.active
{
    left:0 !important
}

prioritize your left:0 with !important.

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

jQuery切换元素位置

3 个答案: