// Инициализация переменных
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);
/* каждый див */
.header > div {}
/* каждый спан в диве */
.header > div > span {}
/* первый див и соответственно по номеру */
.header div:nth-child(1) {}
/* первый див и его спаны */
.header div:nth-child(1) span {}
.block {
background: #fff;
}
.color1 {
background: #000;
}var block = document.querySelector('.block');
block.addEventListener('mouseenter', function () {
block.classList.add('color1');
});
block.addEventListener('mouseleave', function () {
block.classList.remove('color1');
});