Menu Closing alone

Asked

Viewed 145 times

0

I have a javascript menu and my knowledge of javascript is almost null. And unfortunately this menu on mobile he is closing alone ... and as I do not have much knowledge I am suffering to solve this problem.

Here’s the mobile site and I’ll leave the code below.

Menu closing alone : http://mobt.me/ddc6

Code : 

        // Header Menu Mobile Nav
    if (jQuery('.menu')) {
        jQuery('.nav-toggler').click(function (e) {
            e.preventDefault();
            jQuery(this).next('.menu').addClass('open');
            e.stopPropagation();
        });

        jQuery('.menu').on('click', function(e) {
            e.stopPropagation();
        });

        jQuery('body').on('click', function (e) {
            jQuery('.menu').removeClass('open');
        });

        jQuery('#closeMenu').click(function (e) {
            e.preventDefault();
            jQuery('.menu').removeClass('open');
        });
    }
javascript wordpress

  • After the site is fully loaded the menu did not close alone Axcse

  • has some script that detects if the mouse is over/leaving the menu?

  • Here Continue closing regardless of the time you leave loading the site... And no, as far as I know only has this on the menu for mobile

  • so... here it closes even with the cursor over the links... bizarre. but it closes only when it toggle in the class ". open"

  • well, I guess that’s it, your script, starts by checking the click on ". Nav-Toggler", so if it was clicked, it adds the class ". open" in the element with class .menu ai continues the script, understand this as a computer processing the script. the next block detects again click on ". menu", then detects a click on the "body" element that is the body of the page, if it was clicked it removes the ". open" class from the ". "menu, and I think that’s your problem. because the ". Nav-Toggler" is inside the body tag, hence the script while adding the class it then removes

  • Did I take away the function of clicking on the body it closes the resolve menu ? Why is it working only the function that needs to click on the X to close

  • 1

    Well I gave up the function of clicking on the body and closing the menu and it stopped closing alone... thanks for helping me see the script =)

  • I’ll put as answer here and you give the check

  • Take a look at my answer. No need to remove anything. Taking the functionality from the click on the body is not the best output.

Show 4 more comments

2 answers

1


good, I think that’s it, your script, starts by checking the click on ".nav-toggler", so if it was clicked, it adds the class ".open" in the class element .menu ai continues the script, understand this as a computer processing the script. the next block detects again click on ".menu", then detects a click on the element "body" which is the body of the page, if it was clicked it removes the class ".open" of ".menu", and I think that’s your problem. because the ".nav-toggler" is within the tag body, then the script at the same time that adds the class it removes then. it resolves only by removing the block: 

jQuery('body').on('click', function (e) {
  jQuery('.menu').removeClass('open');
});

instead, use another technique to detect click off menu: https://stackoverflow.com/a/7385673/1779650

0

No need to remove anything from the code and keep the functionality of clicking on body to close the menu. Leave your code as is and add a if as below.

Your problem is in a trigger this part of the code that simulates a click on the page, closing the menu:

// Carousel on Tabs of 'Unidades de Lazer'
tabCarousel = setInterval(function(){
   var active = tabNavItem.filter('.active'),
   next = active.next('li'),
   toClick = next.length ? next.find('a') : tabNavItem.eq(0).find('a');
   toClick.trigger('click');
}, 3500);

Add a if to check if the menu is open and prevent it from closing on its own:

// Carousel on Tabs of 'Unidades de Lazer'
tabCarousel = setInterval(function(){
   var active = tabNavItem.filter('.active'),
   next = active.next('li'),
   toClick = next.length ? next.find('a') : tabNavItem.eq(0).find('a');
   if($('.nav-toggler').hasClass('open')){ // este if
      toClick.trigger('click');
   }
}, 3500);

Browser other questions tagged javascript wordpress

You are not signed in. Login or sign up in order to post.