Как показать/скрыть div по клику. Скрыть по клику в любое место?

Question

[ivadfox]

Есть вот такой код, работает, но необходимо сделать так, что бы div скрывался по клику в любое место, а не только по той же ссылке.

<script type="text/javascript">

            function showHide(element_id) {
                //Если элемент с id-шником element_id существует
                if (document.getElementById(element_id)) { 
                    //Записываем ссылку на элемент в переменную obj
                    var obj = document.getElementById(element_id); 
                    //Если css-свойство display не block, то: 
                    if (obj.style.display != "block") { 
                        obj.style.display = "block"; //Показываем элемент
                    }
                    else obj.style.display = "none"; //Скрываем элемент
                }
                //Если элемент с id-шником element_id не найден, то выводим сообщение
                else alert("Элемент с id: " + element_id + " не найден!"); 
            }   
</script>

<a href="javascript:void(0)" onclick="showHide('block_id')">Open_block</a></li>

Comments

[ivadfox]

по возможности наиболее понятно прошу описать. т.к. плохо разбираюсь в javascript

Answer 1

[Сергей]

<script type="text/javascript">
document.body.onclick = function(event) {
  var objs = document.getElementsByClassName('block_class'); 
for (var i; i < objs.length; i++) {
 //Если css-свойство display block и кликнули не по ссылке, по которой должен открыться блок, то: 
 if (objs[i].style.display == "block" && objs[i].attributes['data-block-id'] != event.target.attributes['data-block-id']) { 
   objs[i].style.display = "none"; //Скрываем элемент
  }
}
function showHide(element_id) {
                //Если элемент с id-шником element_id существует
                if (document.getElementById(element_id)) { 
                    //Записываем ссылку на элемент в переменную obj
                    var obj = document.getElementById(element_id); 
                    //Если css-свойство display не block, то: 
                    if (obj.style.display != "block") { 
                        obj.style.display = "block"; //Показываем элемент
                    }
                    else obj.style.display = "none"; //Скрываем элемент
                }
                //Если элемент с id-шником element_id не найден, то выводим сообщение
                else alert("Элемент с id: " + element_id + " не найден!"); 
            }

ссылка теперь в таком формате

<a href="javascript:void(0)" onclick="showHide('block_id')" data-block-id="block_id">Open_block</a></li>

Аттрибут data-block-id так и пишется, на конкретный id не заменяется. Все скрываемые блоки должны иметь общий класс block_class

Comments

[ivadfox]

окей, док, как заставить это работать? и как сделать применимым к нескольким div блокам, которые необходимо открывать отдельно?

[Сергей]

>>как заставить это работать
просто js файл с этим кодом в футере подключите, или inline js в страницу вставьте, вариантов куча, зависит от задачи
>>как сделать применимым к нескольким div блокам
вместо id используй class. В обработчика клика на body используй document.getElementsByClass, в цикле скрывай каждый объект. но добавь проверку event.target.id=obj.id, чтобы скрыть все блоки, кроме того, на котором был клик

[ivadfox]

Сергей: окей, док, а в готовом виде - можно? плохо разбираюсь. очень плохо. скрипт, ссылку, и div ?

[ivadfox]

не работает.

скрипт в шапке,
ссылка
block1

сам DIV

qwe


и стили

#block1 {
width:50%;
height:100%;
margin-left:50%;
position:fixed;
display:none;
background-color:#d77919;
padding:5%;

}

[ivadfox]

Сергей: Что не так?

[ivadfox]

тьфу, div class="block_class" id="block1"

[ivadfox]

Сергей: скрипт между head

[ivadfox]

Сергей: и dreamweaver ругается на последнюю строку.

[Сергей]

ivadfox: скрипт до тега body? лучше скрипт поместить перед закрытием body. а еще лучше обернуть в document.onload = function(){ //тут весть скрипт}

[ivadfox]

Сергей: работать оно всё равно не начало.

[Сергей]

ivadfox: Ну так есть же дебагер, поставьте breakpoint и посмотрите, что не так, потом поправьте. Если вы хотите, чтобы за вас сделали работу, то вам на freelance.ru, а тут я дал почти готовое решение по памяти, но я не хочу его дебажить и допиливать за вас