Форум

madeas · #1 (**permalink**) 16.07.2018, 12:44

Ребята, привет!
Подскажите, как сделать через js связь блоков в разных контейнерах?

HTML https://jsfiddle.net/u8v47fcq/

Нужно сделать так,
1. чтобы при нажатии на инпут исчезал <li> целиком (лучше конечно сделать не инпут, а обычную ссылку)
2. чтобы при активации этого инпута появлялся блок н-1 с соответствующей анимацией
3. чтобы после выполнения анимации блок н-1 исчезал

Все тоже самое можно будет повторить только после перезагрузки страницы.

Заранее спасибо.

рони · #2 (**permalink**) 16.07.2018, 13:00

подожду решения

ksa · #3 (**permalink**) 16.07.2018, 13:16

Сообщение от madeas

1. чтобы при нажатии на инпут исчезал <li> целиком

Так инпут у тебя не видим... Как же на него "нажмут"?
Если "исчезнет" <li>, исчезнет и инпут, ведь он внутри того <li>...

j0hnik · #4 (**permalink**) 16.07.2018, 13:19

<li><input id="koasw" type="checkbox">3</li>
	<script>
document.querySelector('#koasw').onclick =e=> e.target.parentNode.style.display = 'none';
	</script>

j0hnik · #5 (**permalink**) 16.07.2018, 13:21

Сообщение от ksa

Так инпут у тебя не видим... Как же на него "нажмут"?

только так

document.querySelector('#koasw').click();

j0hnik · #6 (**permalink**) 16.07.2018, 13:24

Сообщение от madeas

2. чтобы при активации этого инпута появлялся блок н-1 с соответствующей анимацией

Он изначально уже видимый

madeas · #7 (**permalink**) 16.07.2018, 13:29

j0hnik,
в примере стоит невидимый через css

.n1 {
  display: none;
}

при нажатии должно свойство поменяться на display: block и начать работать анимация.

Я в примере просто накидал все сразу, прошу прощения.

j0hnik · #8 (**permalink**) 16.07.2018, 13:41

https://jsfiddle.net/u8v47fcq/15/

Сообщение от madeas

Все тоже самое можно будет повторить только после перезагрузки страницы.

чтобы автоматом клик сработал?
только если до этого кликали?

j0hnik · #9 (**permalink**) 16.07.2018, 13:52

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		box-sizing: border-box;
	}

	body {
		max-width: 400px;
	}
	a {
		text-decoration: none;
	}
	.block {
		width: 30px;
		height: 30px;
		position: relative;
		background: #333;
	}

	.n2 {
		float: right;
	}

	.n1 {
		display: none;
		transition: 1s;
		left:0;
	}
</style>

</head>
<body>
	<div class="container-1">
		<ul>
			<li><a href="">1</a></li>
			<li><a href="">2</a></li>
			<li><input id="koasw" type="checkbox">3</li>
			<li><a href="">4</a></li>
		</ul>
	</div>

	<div class="container-2">
		<div class="block n1"></div>
	</div>

	<div class="container-3">
		<div class="block n2"></div>
	</div>
	<script>
		var koasw = document.querySelector('#koasw');
		koasw.onclick =e=> {
			e.target.parentNode.style.display = 'none';
			var n1 = document.querySelector('.n1');
			n1.style.display = 'block';
			setTimeout(()=>n1.style.left = '100%');
			setTimeout(()=>n1.style.display = 'none',1000);
			localStorage.setItem('an', 1);
		};
		if(localStorage.getItem('an') == 1) koasw.click();
	</script>
</body>
</html>

madeas · #10 (**permalink**) 16.07.2018, 14:00

j0hnik, не не, все правильно. Спасибо.

Форум

Справочник

Discord чат

Курсы javascript