Всем привет! Начал изучать js совсем не давно и естественно возникли некоторые сложности.
Нужно чтобы при первом нажатии на блок он развернулся, а при втором нажатии на него - свернулся.
Проблема в том что все работает только с последним блоком. И когда нажимаю на первый или второй блок, все равно действия происходит над 3-м.
Хотелось бы чтобы действия происходили над блоком с классом "post" и не задавать для этого блока артибут onClick.
вот моя попытка это сделать:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LoL</title>
<style>
.post{
width: 500px;
height: 40px;
background: #666;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<script>
var post;
var i = 0;
var post = document.querySelectorAll(".post");
while(document.querySelectorAll(".post")[i]){
post[i].onclick = Post(post[i]); // здесь проблемка. походу обработчик вешается только на последний элемент
i++;
}
function Post(mythis){
$this = mythis;
var startH = mythis.clientHeight;
var tumbler = false;
var n = 0;
var tname;
return function(){
h = $this.clientHeight;
tumbler = !tumbler;
n++;
if(tumbler){
clearTimeout(tname);
tname = setInterval(function(){
if(100 <= h) clearTimeout(tname);
$this.style.height = h+"px";
h +=1;
},10);
}else{
clearTimeout(tname);
tname = setInterval(function(){
if(startH >= h) clearTimeout(tname);
$this.style.height = h+"px";
h -=1;
},10);
}
}
};
</script>
</body>
</html>