Home>

I have two functions. The first is responsible for the element slide, the second for opening /closing the menu. If I open the menu first, the slide function does not work. If I first activated the element slide, then the menu will no longer open.

The first function only works for screens below 800px. The second is only for screens larger than 800px. That is, if I opened the menu and enlarged the screen to the size when an element with animation appears, then when I click on the element, the animation no longer occurs. If you first clicked on the element and the animation went through, then when the screen is reduced to size when the menu appears, when you click on the menu button, it does not open. For the functions to start working, you need to reload the page at the desired screen size.

How do I fix this?

Here is the link to the project: https://plupiks.github.io/MNTN/

jQuey CODE

const logoIcon= $ ('. account-body .account-icon')
const logoText= $ ('. account-title')
const body= $ ('. account-body')
const navButton= $ ('. burger-menu')
const mobileMenu= $ ('. mobile-menu')
const mediaQuery= window.matchMedia ('(max-width: 800px)')
const mediaQueryMin= window.matchMedia ('(min-width: 800px)')
if ($ (window) .width () <
 800) {
    menuOpen ();
} else {
    mobileMenu.removeClass ('mobile-menu-active');
}
function menuOpen () {
  navButton.on ('click', function (e) {
    e.stopPropagation ();
    mobileMenu.toggleClass ('mobile-menu-active');
    $ ('. burger-menu -close'). toggleClass ('burger-menu -close-active')
    $ ('. burger-menu -menu'). toggleClass ('burger-menu -menu-disable')
  });
}
if (mediaQueryMin.matches) {
  body.on ('mouseenter', function () {
    $ (logoIcon) .animate ({"left": "8px", "opacity": "1"}, "600");
    $ (logoText) .animate ({"left": "8px"}, "600") .css ({"color": "# fbd784"});
  });
  body.on ('mouseleave', function () {
    $ (logoIcon) .animate ({"left": "24px", "opacity": "0"}, "600")
    $ (logoText) .animate ({"left": "0"}, "600") .css ({"color": "#fff"});
  });
}
$ (window) .click (function () {
  if (mobileMenu.hasClass ('mobile-menu-active')) {
    mobileMenu.toggleClass ('mobile-menu-active');
    $ ('. burger-menu -close'). toggleClass ('burger-menu -close-active')
    $ ('. burger-menu -menu'). toggleClass ('burger-menu -menu-disable')
  }
})
function menuRemoveClass () {
  if ($ (window) .width () >
 800) {
    $ ('. mobile-menu'). removeClass ('mobile-menu-active');
    $ ('. burger-menu -menu'). removeClass ('burger-menu -menu-disable')
    $ ('. burger-menu -close'). removeClass ('burger-menu -close-active')
  }
}
$ (window) .on ('resize load', function () {
  menuRemoveClass ();
})
mobileMenu.click (function (e) {
  e.stopPropagation ();
})
  • Answer # 1

    menu does not work because You hang the handler on click only if at the time of loading the window width is less than 800. The handler must be hung without a condition