Добрый день. Столкнулся с проблемой при реализации выпадающего меню.
Суть проблемы такова. При наведении на родительский пункт меню, по средствам CSS, раскрывается подменю. А при наведении курсора на ссылки в подменю, начинают подтягиваться материалы (ajax) в div в этом же подменю. Как реализовать загрузку материалов в первый пункт подменю уже при наведении курсора на родительский пункт меню.
$(".js-dropnav-active li.dropnav-menu__item").hover(function(){
$(".js-dropnav-active li.dropnav-menu__item").removeClass("dropnav-menu__active");
$(this).addClass("dropnav-menu__active");
var link = $(this).attr('id');
var data = 'data='+link;
$.ajax({
url: 'components/drop-menu/items.php',
type: 'POST',
data: data,
dataType: 'html',
success: function(result){
$("#ajax-"+link).html(result);
},
beforeSend: function(){
var imgProc = '<div class="loading"></div>';
$("#ajax-"+link).html(imgProc);
}
});
return false;
});
});
<ul class="nav-bar">
<li class="nav-bar__item dropnav js-dropnav">
<a href="#">Родительский пункт меню</a>
<ul class="dropnav-menu">
<li id="pc" class="dropnav-menu__item dropnav-menu__active">
<a href="#">Первый пункт подменю</a>
<ul class="dropnav-submenu">
<div id="ajax-pc"></div>
</ul>
</li>
<li id="pr" class="dropnav-menu__item ">
<a href="#">Второй пункт подменю</a>
<ul class="dropnav-submenu">
<div id="ajax-pr"></div>
</ul>
</li>
</ul>
</li>
</ul>
добавить а не вставить
