javascript 在弹出菜单中启用子菜单

Posted 2021-05-03

/* Adds an arrow next to menu items with sub menus */
/* You will most likely need to adjust this per site ~~~~~~~~~~~~~~~~~~~~~ */
.fusion-flyout-mobile-menu .menu-item-has-children > a span::after {
    content: '\e61f';
    display: inline-block;
    font-family: icomoon;
    font-size: 18px;
    width: 18px;
    line-height:35px;
    color:#fff;
    position: static;
	margin-left: 1em;
}


/* These will most likely be fine as they are ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Theis makes it so you can't scroll away from the menu and search icons */
.fusion-flyout-active .fusion-header-has-flyout-menu-content {
    position: fixed;
    width:calc(100% - 60px);
}

/* This makes the current nav item open by default */
.fusion-flyout-mobile-menu.fusion-mobile-nav-holder .menu-item-has-children.fusion-mobile-current-nav-item .sub-menu {
	display: block;
}

//enable child menu items on mobile flyout menu (works like an accordion element)
//Must be inside an on ready function
function menuSetup() {
    //enable child menu items on mobile flyout menu (works like an accordion element)
    $('.fusion-flyout-menu .menu-item-has-children > a').click(function(e) {
      e.preventDefault();
        
      $('.fusion-flyout-menu .menu-item-has-children.open > .sub-menu').not($(this).next('.sub-menu')).slideUp();
      $('.fusion-flyout-menu .menu-item-has-children.open').not($(this).parents('.menu-item-has-children')).toggleClass('open');

      console.log($(this));
      console.log($(this).parents('.menu-item-has-children'));
      $(this).parents('.menu-item-has-children').toggleClass('open');
      $(this).next('.sub-menu').slideToggle();
    });
}