Всё ок, спасибо)
|
рони, подскажи пожалуйста ещё что бы при клике в пустую область слайдер закрывался.
|
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: |
| Часовой пояс GMT +3, время: 21:58. |