Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Закрытие и открытие дива по клику (https://javascript.ru/forum/misc/25996-zakrytie-i-otkrytie-diva-po-kliku.html)

OLDBOY 22.02.2012 02:36

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

Никак не могу понять как это сделать((

ПС: поиском не нашол похожей проблеммы

рони 22.02.2012 08:18

открыть закрыть открывашка на 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 15.01.2015 22:58

рони, подскажи как впилить анимацию при открытии?

рони 15.01.2015 23:24

yatony,
воспользоваться поиском по форуму и найти 100500 открывашек с анимацей

рони 15.01.2015 23:56

Открывашка на 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>

yatony 16.01.2015 01:59

рони, не получается, такого понятия как открывашки на форуме нет. Мне бы простое открытие сверху вниз.

рони 16.01.2015 10:14

Цитата:

Сообщение от yatony
Мне бы простое открытие сверху вниз.

<!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>

рони 16.01.2015 11:27

Открывашка slideToggle открыть закрыть ссылки Открыть блок закрыть другие
 
:cray:
http://javascript.ru/forum/dom-windo...tml#post315695
http://javascript.ru/forum/jquery/45...tml#post298574
http://javascript.ru/forum/jquery/47...tml#post314573
http://javascript.ru/forum/jquery/52...tml#post344389
http://javascript.ru/forum/jquery/41...tml#post273733
http://javascript.ru/forum/jquery/46...tml#post307525
http://javascript.ru/forum/jquery/40...tml#post266547
http://javascript.ru/forum/misc/2599...tml#post159088
http://javascript.ru/forum/jquery/43...tml#post289153
http://javascript.ru/forum/dom-windo...tml#post309027
http://javascript.ru/forum/css-html/...tml#post241292
http://javascript.ru/forum/jquery/12...html#post76294
http://javascript.ru/forum/dom-windo...tml#post105545
http://jqueryui.com/tabs/#collapsible
http://javascript.ru/forum/dom-windo...tml#post307758
http://javascript.ru/forum/showthrea...168#post289165
http://javascript.ru/forum/jquery/38...tml#post253268

yatony 16.01.2015 11:49

рони, спасибо, но есть ещё одна маленькая проблемка, так как для div установлен css, то все другие дивы, которые не относятся к спойлеру на странице исчезают.

рони 16.01.2015 12:06

yatony,
а придумать селектор :cray: смотрите 7 пост снова

yatony 16.01.2015 12:32

Всё ок, спасибо)

yatony 18.01.2015 17:19

рони, подскажи пожалуйста ещё что бы при клике в пустую область слайдер закрывался.

рони 18.01.2015 18:48

yatony, 6 ссылка пост 8
Выпадающий блок (DropDown)

rikitiki 25.04.2015 10:30

Здравствуйте!
А без jquery на чистом js варианта нет?

рони 25.04.2015 15:53

Цитата:

Сообщение от rikitiki
А без jquery на чистом js варианта нет?

вы тему читали, пост 2?

rikitiki 25.04.2015 18:32

Спасибо за ответ!
Во втором посте при клике на пустую область, или правильнеее сказать вне элемента, дивы не закрываются.
Дивы закрываются тольком нажатием на кнопку. Мне нужно чтобы в меню при клике на иконку поиска открывалась форма поиска, а при обратном клике на иконку, или в любом месте вокруг дива формы поиска, закрывалась.
Как в меню этого сайта:http://algolux.com/news/
Ваш пример который вы рекомендовали в посте 13, с выпадающими дивами, для меня сложен. Я так понял что там лишний код, который управляет несколькими дивами.
Уже согласен и на jquery. Но ничего подзодящего поиском на сайте найти не могу. Да и на других сайтах тоже.
На моём тестовом сайте на wordpress http://cosmetic.besaba.com/ я пока вставил в меню текстовую кнопку "Поиск" вместо иконки, и под ней сейчас постоянно торчит Div с формой поиска, который по идее должен открываться и закрываться кликом.
У меня кнопка в теге ссылки "а", которая никуда не ведёт. Ниже div c формой. И всё это заключено в элемент списка li меню

рони 25.04.2015 19:00

rikitiki,
http://javascript.ru/forum/misc/5531...tml#post367958

рони 17.09.2015 15:58

Открывашка на 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>

Мускусный кроль 17.09.2015 18:50

window.onload
 
Ув. РОНИ.
А как избавиться в Вашем скрипте от window.onload?
Чтобы div самостоятельно не открывался при загрузке/перезагрузке страницы.
(У меня на этом скрипте пункты меню во всплывающих окнах. Т.е., первоначальное открытие div-а должно инициироваться пользователем.)

рони 17.09.2015 19:07

Цитата:

Сообщение от Мускусный кроль
Чтобы div самостоятельно не открывался при загрузке/перезагрузке страницы.

попробуйте решить это самостоятельно за 30 секунд, а лучше за 5.
наверно что-то открывает блок, и если это что-то убрать :cray:

Мускусный кроль 17.09.2015 19:14

window.onload = function()
 
Понятно, что окно при загрузке открывается с window.onload
Вот только не хватает ума правильно удалить window.onload.
Скрипт перестаёт работать.
Уж простите великодушно.
Помогите.

рони 17.09.2015 19:19

Цитата:

Сообщение от Мускусный кроль
window.onload

холодно

Мускусный кроль 17.09.2015 19:32

Вот этот код закрывает окно по esc и одновременно открывает окно (div) при загрузке/перезагрузке страницы. Как разделить эти две функции - ума не приложу.

/* добавка - закрытие дива по esc*/
window.onload = function() {
document.addEventListener('keydown', function(event) {
event.keyCode == 27 && document.querySelector(".max").classList.remove("m ax")
});
_click(1)
}

рони 17.09.2015 19:48

Цитата:

Сообщение от Мускусный кроль
_click(1)

убрать

Мускусный кроль 17.09.2015 19:59

РОНИ, спасибо за науку.
Пока ждал твоего ответа, облазил весь интернет, вчитался в строки твоего кода, дочитался до _click(1), убрал его - всё работает.

Потом зашел сюда, прочитал твоё сообщение:
_click(1)
убрать

Теперь вот сижу ржу, как конь. Плюс тебе в карму за науку. :):):) К сожалению, правила форума не дают возможности добавить два плюса подряд. Спасибо.:):):)
А все проблемы от стереотипа. Вот статья о вредности стереотипного мышления (это юмор)
http://tehnopost.info/things/5-sisadmin.html

d1mka21 23.03.2016 14:27

рони,
А подскажите,пожалуйста, куда нужно дописать scrolTo к открывающемуся id, что бы страница прокручивал к открывшемся div, по Вашей открывашке?
http://javascript.ru/forum/misc/2599...tml#post388975

рони 23.03.2016 15:03

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 заменить на коментарий или не использовать плагин и вставить эти строки

Nekitok 28.09.2016 19:05

Здравствуйте, взял за основу ваши наработки. Хотел добавить, чтобы когда одна из ссылок активна, она была закрашена другим цветом. А при переходе на другую ссылку, первая становилась прежней, а текущая красилась.
Пробовал разные варианты и другие наработки, ничего пока не получилось.

<!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>

рони 28.09.2016 19:26

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 28.09.2016 19:32

рони,
Большое спасибо! Очень оперативно)

рони 28.09.2016 19:41

Nekitok,
на форуме три сотни примеров этого, искать открывашка ...


Часовой пояс GMT +3, время: 16:52.