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切換元素位置

回答

相關問題