<div class="test test1">
</div>
<div class="test test2">
</div>.test {
position: relative;
width: 200px; height: 200px;
background: #000;
float: left
}
.test2 {
background: #f00;
display: none;
}var div1 = document.querySelector('.test1'),
div2 = document.querySelector('.test2'),
visibility = false;
function toggle () {
div2.style.display = visibility ? 'block' : 'none';
}
div1.addEventListener('click', function (e) {
e.stopPropagation();
visibility = !visibility;
toggle();
}, false);
document.addEventListener('click', function () {
visibility = false;
toggle();
});
div2.addEventListener('click', function (e) {
e.stopPropagation();
}, false);
// Инициализация переменных
var div1 = document.querySelector('.test1'),
div2 = document.querySelector('.test2'),
visibility = false;
// Функция, которая блоку .test2 устанавливает
// css-свойство display:none или block
function toggle () {
// если visibility true, то display: block, иначе display: none
div2.style.display = visibility ? 'block' : 'none';
}
// При клике по .test1 выполнять следующие действия:
div1.addEventListener('click', function (e) {
e.stopPropagation(); // Отчищать поток существующих событий(кликов, наведений мыши и прочего)
visibility = !visibility; // Установить булеву переменную в противоположное значение
toggle(); // Вызвать функцию toggle
}, false);
// Клик по документу(нужно для эмуляции клика вне .tes1 и .test2)
document.addEventListener('click', function () {
visibility = false; // установить переменную в false
toggle(); // вызвать функцию toggle
});
// клик по .test2
div2.addEventListener('click', function (e) {
e.stopPropagation(); // Очищать поток всех событий(нужно для предотвращение клика по document)
}, false);