Каждый элемент меню навигации имеет различное «подменю» полной ширины, подменю не является дочерним элементом элемента меню, но оба являются дочерними элементами одного и того же родителя. при щелчке по пункту меню навигации появляется соответствующее подменю. когда за пределами подменю щелкают, подменю исчезают. (Я добавляю класс на JQuery и отображения вкл / выкл в CSS)
Теперь я хочу использовать это событие click для двух дополнительных вещей:
1. постепенно входить и выходить из подменю.
2. добавление класса к несвязанному элементу (когда появляется подменю, кнопка в заголовке окрашена).
Я пытался добавить либо fadeIn, либо другой тогл-класс внутри функции, но здесь кое-что мне не хватает. Кроме того, по какой-то причине задание непрозрачности div 0 и opacity 1 (для нового класса) работает, но переход не работает.
Вот код примера отдельного события:
$(".menu-item-743").on("click", function (event) {
$(".sub-menu-first").toggleClass('sub-menu-first-on');
event.stopPropagation();
});
$(".sub-menu-first").on("click", function (event) {
event.stopPropagation();
});
$(".elementor-location-footer, #main").on("click", function () {
$('.menu-item-743').prop('checked', true);
$('.sub-menu-first').removeClass('sub-menu-first-on');
});
#site-header .elementor-location-header header .sub-menu-first{
position:absolute;
width:950px;
opacity:0;
-webkit-transition: opacity 1.9s ease-out;
-moz-transition:opacity 1.9s ease-out;
-o-transition: opacity 1.9s ease-out;
transition: opacity 1.9s ease-out;
}
#site-header .elementor-location-header header .sub-menu-first-on{
display:block;
opacity:1;
}