добавление событий в подменю jquery - PullRequest
0 голосов
/ 20 июня 2019

Каждый элемент меню навигации имеет различное «подменю» полной ширины, подменю не является дочерним элементом элемента меню, но оба являются дочерними элементами одного и того же родителя. при щелчке по пункту меню навигации появляется соответствующее подменю. когда за пределами подменю щелкают, подменю исчезают. (Я добавляю класс на 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;
}
...