Связь блоков в разных контейнерах
Ребята, привет!
Подскажите, как сделать через js связь блоков в разных контейнерах? HTML https://jsfiddle.net/u8v47fcq/ Нужно сделать так, 1. чтобы при нажатии на инпут исчезал <li> целиком (лучше конечно сделать не инпут, а обычную ссылку) 2. чтобы при активации этого инпута появлялся блок н-1 с соответствующей анимацией 3. чтобы после выполнения анимации блок н-1 исчезал Все тоже самое можно будет повторить только после перезагрузки страницы. Заранее спасибо. |
подожду решения :-?
|
Цитата:
Если "исчезнет" <li>, исчезнет и инпут, ведь он внутри того <li>... |
<li><input id="koasw" type="checkbox">3</li> <script> document.querySelector('#koasw').onclick =e=> e.target.parentNode.style.display = 'none'; </script> |
Цитата:
document.querySelector('#koasw').click(); |
Цитата:
|
j0hnik,
в примере стоит невидимый через css .n1 { display: none; } при нажатии должно свойство поменяться на display: block и начать работать анимация. Я в примере просто накидал все сразу, прошу прощения. |
https://jsfiddle.net/u8v47fcq/15/
Цитата:
только если до этого кликали? |
<!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> |
j0hnik, не не, все правильно. Спасибо.
|
Часовой пояс GMT +3, время: 06:05. |