Закрытие и открытие дива по клику
Добрый вечер! Есть скрипт:
var text = 0; function _click(id) { if (text != id) { //close text if (text != 0) { if (document.getElementById('item'+text)) document.getElementById('item'+text).style.display = 'none'; } } //open current if (document.getElementById('item'+id)) document.getElementById('item'+id).style.display = 'block'; } text = id; } else { //close text if (document.getElementById('item'+text)) document.getElementById('item'+text).style.display = 'none'; } text = 0; } } и ссылки: <a onclick="_click(1); return false;" href="#">1</a> <a onclick="_click(2); return false;" href="#">2</a> <a onclick="_click(3); return false;" href="#">3</a> и дивы: <div style=" display:none" id="item1"> <div style=" display:none" id="item2"> <div style=" display:none" id="item3"> Это все работает(при клике по ссылке пив открывается,нажимаем на 2ю ссылку,первый див скрывается а 2й открывается) Но не получается сделать так чтоб 1й див сразу был открыт,и при нажатии 1й закрывается а 2й открывается,щас если сделать сразу первый див блоком то тогда по 2й и 3й сылке не открываются дивы пока 2а раза не кликнеш по 1й ссылке чтоб 1й див закрылся(( Никак не могу понять как это сделать(( ПС: поиском не нашол похожей проблеммы |
открыть закрыть открывашка на js
OLDBOY,
Вариант ... <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> var _click = function () { var b = 1; return function (c) { var a = document.getElementById("item" + b); c == b && (a.style.display = "none" == a.style.display ? "" : "none"); c != b && (a.style.display = "none", a = document.getElementById("item" + c), a.style.display = "", b = c) } }(); window.onload = function() { _click(1) } </script> </head> <body> <a onclick="_click(1); return false;" href="#">1</a> <a onclick="_click(2); return false;" href="#">2</a> <a onclick="_click(3); return false;" href="#">3</a> <div style=" display:none" id="item1">div1</div> <div style=" display:none" id="item2">div2</div> <div style=" display:none" id="item3">div3</div> </body> </html> |
рони, подскажи как впилить анимацию при открытии?
|
yatony,
воспользоваться поиском по форуму и найти 100500 открывашек с анимацей |
Открывашка на js + css3
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> div{ position: absolute; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); width: 200px; height: 100px; } div.max { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; } div:nth-of-type(1) { background: #FF9933; } div:nth-of-type(2) { background: #6666FF; } div:nth-of-type(3) { background: #CC33CC; } </style> <script type="text/javascript"> var _click = function () { var b = 1; return function (c) { var a = document.getElementById("item" + b); c == b && (a.className = "" == a.className ? "max" : ""); c != b && (a.className = "", a = document.getElementById("item" + c), a.className = "max", b = c) } }(); window.onload = function() { _click(1) } </script> </head> <body> <a onclick="_click(1); return false;" href="#">1</a> <a onclick="_click(2); return false;" href="#">2</a> <a onclick="_click(3); return false;" href="#">3</a> <div id="item1">div1</div> <div id="item2">div2</div> <div id="item3">div3</div> </body> </html> |
рони, не получается, такого понятия как открывашки на форуме нет. Мне бы простое открытие сверху вниз.
|
Цитата:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> div[id^="item"]{ -webkit-transition:height .6s; -moz-transition:height .6s; -o-transition:height .6s; transition:height .6s; width:200px; height:0px; overflow:hidden; } div.max{ height:100px; -webkit-transition-delay:.6s; -moz-transition-delay:.6s; -o-transition-delay:.6s; transition-delay:.6s; -webkit-transition-duration:1s; -moz-transition-duration:1s; -o-transition-duration:1s; transition-duration:1s; } #item1{ background:#F93; } #item2{ background:#66F; } #item3{ background:#C3C; } </style> <script type="text/javascript"> var _click = function () { var b = 1; return function (c) { var a = document.getElementById("item" + b); c == b && (a.className = "" == a.className ? "max" : ""); c != b && (a.className = "", a = document.getElementById("item" + c), a.className = "max", b = c) } }(); window.onload = function() { _click(1) } </script> </head> <body> <div>обычный див</div> <a onclick="_click(1); return false;" href="#">1</a> <a onclick="_click(2); return false;" href="#">2</a> <a onclick="_click(3); return false;" href="#">3</a> <div id="item1">div1</div> <div id="item2">div2</div> <div id="item3">div3</div> <div>обычный див</div> </body> </html> |
рони, спасибо, но есть ещё одна маленькая проблемка, так как для div установлен css, то все другие дивы, которые не относятся к спойлеру на странице исчезают.
|
yatony,
а придумать селектор :cray: смотрите 7 пост снова |
Всё ок, спасибо)
|
рони, подскажи пожалуйста ещё что бы при клике в пустую область слайдер закрывался.
|
yatony, 6 ссылка пост 8
Выпадающий блок (DropDown) |
Здравствуйте!
А без jquery на чистом js варианта нет? |
Цитата:
|
Спасибо за ответ!
Во втором посте при клике на пустую область, или правильнеее сказать вне элемента, дивы не закрываются. Дивы закрываются тольком нажатием на кнопку. Мне нужно чтобы в меню при клике на иконку поиска открывалась форма поиска, а при обратном клике на иконку, или в любом месте вокруг дива формы поиска, закрывалась. Как в меню этого сайта:http://algolux.com/news/ Ваш пример который вы рекомендовали в посте 13, с выпадающими дивами, для меня сложен. Я так понял что там лишний код, который управляет несколькими дивами. Уже согласен и на jquery. Но ничего подзодящего поиском на сайте найти не могу. Да и на других сайтах тоже. На моём тестовом сайте на wordpress http://cosmetic.besaba.com/ я пока вставил в меню текстовую кнопку "Поиск" вместо иконки, и под ней сейчас постоянно торчит Div с формой поиска, который по идее должен открываться и закрываться кликом. У меня кнопка в теге ссылки "а", которая никуда не ведёт. Ниже div c формой. И всё это заключено в элемент списка li меню |
|
Открывашка на js плюс скрытие по Esc
:write:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> div{ position: absolute; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); width: 200px; height: 100px; } div.max { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; } div:nth-of-type(1) { background: #FF9933; } div:nth-of-type(2) { background: #6666FF; } div:nth-of-type(3) { background: #CC33CC; } </style> <script type="text/javascript"> var _click = function () { var b = 1; return function (c) { var a = document.getElementById("item" + b); c == b && (a.className = "" == a.className ? "max" : ""); c != b && (a.className = "", a = document.getElementById("item" + c), a.className = "max", b = c) } }(); window.onload = function() { document.addEventListener('keydown', function(event) { event.keyCode == 27 && document.querySelector(".max").classList.remove("max") }); _click(1) } </script> </head> <body> <a onclick="_click(1); return false;" href="#">1</a> <a onclick="_click(2); return false;" href="#">2</a> <a onclick="_click(3); return false;" href="#">3</a> <div id="item1">div1</div> <div id="item2">div2</div> <div id="item3">div3</div> </body> </html> |
window.onload
Ув. РОНИ.
А как избавиться в Вашем скрипте от window.onload? Чтобы div самостоятельно не открывался при загрузке/перезагрузке страницы. (У меня на этом скрипте пункты меню во всплывающих окнах. Т.е., первоначальное открытие div-а должно инициироваться пользователем.) |
Цитата:
наверно что-то открывает блок, и если это что-то убрать :cray: |
window.onload = function()
Понятно, что окно при загрузке открывается с window.onload
Вот только не хватает ума правильно удалить window.onload. Скрипт перестаёт работать. Уж простите великодушно. Помогите. |
Цитата:
|
Вот этот код закрывает окно по esc и одновременно открывает окно (div) при загрузке/перезагрузке страницы. Как разделить эти две функции - ума не приложу.
/* добавка - закрытие дива по esc*/ window.onload = function() { document.addEventListener('keydown', function(event) { event.keyCode == 27 && document.querySelector(".max").classList.remove("m ax") }); _click(1) } |
Цитата:
|
РОНИ, спасибо за науку.
Пока ждал твоего ответа, облазил весь интернет, вчитался в строки твоего кода, дочитался до _click(1), убрал его - всё работает. Потом зашел сюда, прочитал твоё сообщение: _click(1) убрать Теперь вот сижу ржу, как конь. Плюс тебе в карму за науку. :):):) К сожалению, правила форума не дают возможности добавить два плюса подряд. Спасибо.:):):) А все проблемы от стереотипа. Вот статья о вредности стереотипного мышления (это юмор) http://tehnopost.info/things/5-sisadmin.html |
рони,
А подскажите,пожалуйста, куда нужно дописать scrolTo к открывающемуся id, что бы страница прокручивал к открывшемся div, по Вашей открывашке? http://javascript.ru/forum/misc/2599...tml#post388975 |
d1mka21,
var _click = function () { var b = 1; return function (c) { var a = document.getElementById("item" + b); c == b && (a.className = "" == a.className ? "max" : ""); c != b && (a.className = "", a = document.getElementById("item" + c), a.className = "max", b = c); a = document.querySelector(".max"); a && a.scrollIntoView() //$(".max").scrolTo() } }(); строки 7,8 заменить на коментарий или не использовать плагин и вставить эти строки |
Здравствуйте, взял за основу ваши наработки. Хотел добавить, чтобы когда одна из ссылок активна, она была закрашена другим цветом. А при переходе на другую ссылку, первая становилась прежней, а текущая красилась.
Пробовал разные варианты и другие наработки, ничего пока не получилось. <!DOCTYPE html> <html> <head> <title></title> <style> #text { padding: 5px 0px 5px 0px; margin: 20px 0px; } .qwer { color: #232323; font-size: 10pt; border: solid 1px #999; margin: 15px; padding: 10px 30px; } #text a:hover { background-color: #ff830a; } #text a:active { background: yellow; } </style> <script type="text/javascript"> var _click = function () { var b = 1; return function (c) { var a = document.getElementById("item" + b); c == b && (a.style.display = "none" == a.style.display ? "" : "none"); c != b && (a.style.display = "none", a = document.getElementById("item" + c), a.style.display = "", b = c) } }(); window.onload = function() { _click(1) } </script> </head> <body> <div id="text"> <a onclick="_click(1); return false;" href="" class="qwer">ОПИСАНИЕ</a> <a onclick="_click(2); return false;" href="" class="qwer">ХАРАКТЕРИСТИКИ</a> <a onclick="_click(3); return false;" href="" class="qwer">ЗАМЕР</a> <a onclick="_click(4); return false;" href="" class="qwer">МОНТАЖ</a> </div> <div style=" display:none" id="item1">div1</div> <div style=" display:none" id="item2">div2</div> <div style=" display:none" id="item3">div3</div> <div style=" display:none" id="item4">div4</div> </body> </html> |
Nekitok,
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style> #text { padding: 5px 0px 5px 0px; margin: 20px 0px; } .qwer { color: #232323; font-size: 10pt; border: solid 1px #999; margin: 15px; padding: 10px 30px; } #text a:hover { background-color: #ff830a; } #text a:active, #text a.active { background: yellow; } .item{ display: none; } .item.active { display: block; } </style> <script type="text/javascript"> var _click = function () { var b = 1; return function (c) { var a = document.getElementById("item" + b), k = document.querySelector(".qwer:nth-child("+b+")"); c == b && (a.classList.toggle("active"),k.classList.toggle("active")); c != b && (a.classList.remove("active"), k.classList.remove("active"), a = document.getElementById("item" + c), a.classList.add("active"), k = document.querySelector(".qwer:nth-child("+c+")"), k.classList.add("active"), b = c) } }(); window.onload = function() { _click(1) } </script> </head> <body> <div id="text"> <a onclick="_click(1); return false;" href="" class="qwer">ОПИСАНИЕ</a> <a onclick="_click(2); return false;" href="" class="qwer">ХАРАКТЕРИСТИКИ</a> <a onclick="_click(3); return false;" href="" class="qwer">ЗАМЕР</a> <a onclick="_click(4); return false;" href="" class="qwer">МОНТАЖ</a> </div> <div class="item" id="item1">div1</div> <div class="item" id="item2">div2</div> <div class="item" id="item3">div3</div> <div class="item" id="item4">div4</div> </body> </html> |
рони,
Большое спасибо! Очень оперативно) |
Nekitok,
на форуме три сотни примеров этого, искать открывашка ... |
Часовой пояс GMT +3, время: 16:52. |