Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.07.2018, 12:44
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

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

HTML https://jsfiddle.net/u8v47fcq/

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

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

Заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 16.07.2018, 13:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

подожду решения
Ответить с цитированием
  #3 (permalink)  
Старый 16.07.2018, 13:16
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от madeas
1. чтобы при нажатии на инпут исчезал <li> целиком
Так инпут у тебя не видим... Как же на него "нажмут"?
Если "исчезнет" <li>, исчезнет и инпут, ведь он внутри того <li>...
Ответить с цитированием
  #4 (permalink)  
Старый 16.07.2018, 13:19
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<li><input id="koasw" type="checkbox">3</li>
	<script>
document.querySelector('#koasw').onclick =e=> e.target.parentNode.style.display = 'none';
	</script>
Ответить с цитированием
  #5 (permalink)  
Старый 16.07.2018, 13:21
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от ksa
Так инпут у тебя не видим... Как же на него "нажмут"?
только так
document.querySelector('#koasw').click();
Ответить с цитированием
  #6 (permalink)  
Старый 16.07.2018, 13:24
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от madeas
2. чтобы при активации этого инпута появлялся блок н-1 с соответствующей анимацией
Он изначально уже видимый
Ответить с цитированием
  #7 (permalink)  
Старый 16.07.2018, 13:29
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

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

.n1 {
  display: none;
}


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

Я в примере просто накидал все сразу, прошу прощения.
Ответить с цитированием
  #8 (permalink)  
Старый 16.07.2018, 13:41
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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

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

Последний раз редактировалось j0hnik, 16.07.2018 в 13:49.
Ответить с цитированием
  #9 (permalink)  
Старый 16.07.2018, 13:52
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!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>
Ответить с цитированием
  #10 (permalink)  
Старый 16.07.2018, 14:00
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Показывать по 5 блоков Meduzaweb Общие вопросы Javascript 2 29.03.2018 16:07
Скрипт выравнивания высоты блоков razorg1991 Элементы интерфейса 13 15.01.2017 00:04
Скрипт карусели блоков rozmakc Работа 3 25.07.2016 21:35
Смена класса по клику, слайдер блоков Дмитрий123 Общие вопросы Javascript 2 04.02.2016 22:28
Обращение к элементам, имеющим одинаковые ID, находящимся в разных контейнерах onejsquestion Общие вопросы Javascript 11 23.08.2010 23:08