Добрый день!
Не силен в JS или Jquery - прошу помощи)
Есть выпадающее меню, пример:
//выпадающее меню
<div class="seo-row"> // Главное меню, располагается слева
<a href="" data-block="menu-59">Пункт меню</a>
<a href="" data-block="menu-60">Пункт меню</a>
<a href="" data-block="menu-61">Пункт меню</a>
</div>
<div class="seo-content"> // подменю, появляется при наведении на ссылки в главном меню
<div class="menu menu-59">
<a href="">Подменю</a>
</div>
<div class="menu menu-60">
<a href="">Подменю</a>
</div>
<div class="menu menu-61">
<a href="">Подменю</a>
</div>
</div>
Стили:
.menu{padding: 20px 40px;position:absolute;visibility:hidden;opacity:0;transition: 0s 0.2s;}
.menu.active{transition-delay: 0.2s;visibility: visible;opacity: 1;}
Надо чтобы при наведении, например на Пункт меню с data-block="menu-59", появлялось Подменю с классом menu-59.
При этом, чтобы при выпадании Главного меню - первый блок Подменю с классом menu-59 был изначально активен.
На JQuery сделал пока так:
var $activeblock = $('.menu');
$activeblock.first().addClass('active');
$('.seo-row > a').hover(function() {
var block = $(this).data('block');
$('.' + block).addClass('active');
}, function() {
var block = $(this).data('block');
$('.' + block).removeClass('active');
});
но проблема в том, что:
1. При попытке перейти в появившееся подменю - оно исчезает - видимо надо какую то задержку или еще что в коде jquery дописать правильно, т.е. надо чтобы не исчезало и в появившемся подменю можно было что-то выбрать, а исчезало только при наведении на другую ссылку в Главном Меню
2. При исчезновении Главного меню и при его повторном выпадании - снова был активен первое Подменю