Bug on the menu

Question

Bug on the menu

Navigation

#1 by (0 votes)

0

I am developing a responsive menu where in the mobile version it is called through an icon, however on some occasions when we resize the page a click event stops working and the class (just below) .menu-mobile is not withdrawn

  <div class="nav-toggle"></div>

  <nav class="menu">
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>      
        </nav>

.

function menu (){

$('.nav-toggle').click( function () {


   if ($('.menu').hasClass('menu-mobile')) {
       $('.menu').addClass('abrir-menu').removeClass('menu-mobile');

   } else {
       $('.menu').addClass('menu-mobile').removeClass('abrir-menu');
   }  });  }



$(window).resize( function (){
      var largura = $(window).width();

      if(largura < 767){
      $('.menu').addClass('menu-mobile');
       } else {
      $('.menu').removeClass('menu-mobile abrir-menu');

}
menu();  });

In summary, the .menu-mobile class serves only as a trigger to execute the conditional open and close menu

javascript jquery front-end

asked by anonymous 02.07.2018 / 06:05

1 answer

Lock to not show another div while one is already visible to the user Linked list only inserts only one element

score 0 · Answer 1

I solved the problem if this is to help someone in the future here is the answer, the user "DVD" had commented that resizing the function did not detect the resize, so I enter a name for my window function and called it inside the function menu , thus:

function menu (){

$('.nav-toggle').click( function () {


   if ($('.menu').hasClass('menu-mobile')) {
       $('.menu').addClass('abrir-menu').removeClass('menu-mobile');

   } else {
       $('.menu').addClass('menu-mobile').removeClass('abrir-menu');
   }  
  detectaLargura();  
 });  
 }



$(window).on('load resize', function detectaLargura (){
      var largura = $(window).width();

      if(largura < 767){
      $('.menu').addClass('menu-mobile');
       } else {
      $('.menu').removeClass('menu-mobile abrir-menu');

}
menu();  
});