Доброго времени суток!
Задача сделать меню каталога товаров:
1.Кнопка Каталог по клику открывается и закрывается -
сделано.
2.Необходимо, что бы при наведении на первый блок появлялся второй, при наведении на второй появлялся третий -
сделано.
3.Необходимо чтобы при событии ухода мыши с третьего блока, скрывался третий и второй блоки, а при наведении обратно на второй блок сохранялся стиль видимости блоков 2 и 3.
А при возврате наведения на первый блок, оставался второй блок.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="jquery.comjquery-3.4.1.min.js"></script>
</head>
<body>
<div class="navbar">
<div class="catalog" id="catalog">
<a id="catalogGoods" href="#">Каталог Товаров</a>
</div>
<div class="cat1" id="cat1">
<a href="">Продукт 1</a>
<a href="">Продукт 2</a>
<a href="">Продукт 3</a>
</div>
<div class="cat2" id="cat2"></div>
<div class="cat3" id="cat3"></div>
</div>
<script>
var catalog = document.getElementById('catalog');
var cat1 = document.getElementById('cat1');
var cat2 = document.getElementById('cat2');
var cat3 = document.getElementById('cat3');
catalog.addEventListener('click', OnBlockCatalog);
catalog.addEventListener('click', OffBlockCatalog);
function OnBlockCatalog() {
cat1.style.display = "block";
this.removeEventListener('click', OnBlockCatalog);
this.addEventListener('click', OffBlockCatalog);
}
function OffBlockCatalog() {
cat1.style.display = "none";
this.removeEventListener('click', OffBlockCatalog);
this.addEventListener('click', OnBlockCatalog);
}
cat1.addEventListener('mouseenter', onTwoBlock);
cat2.addEventListener('mouseenter', onThreeBlock);
function onTwoBlock(){
cat2.style.display = 'block';
}
function onThreeBlock(){
cat3.style.display = 'block';
}
cat3.addEventListener('mouseleave', offAllBlock);
function offAllBlock(){
var One = cat1.style.display;
var Two = cat2.style.display;
var Three = cat3.style.display;
}
</script>
</body>
</html>
