Закрытие и открытие дива по клику
Добрый вечер! Есть скрипт:
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, время: 07:49. |