根据情况阻止jQuery脚本运行

Question

I have this script which should allow slideUp/slideDown for nested ul (dropdown menu) when window is larger than 800px and disable slideUp/slideDown functionality if window's width is less than 800px and simply show all nav content as an unordered list.

Everything works as expected on 'load' event.

Unfortunately I can't get slideUp/slideDown animations to stop from being executed on 'resize' event after window has been resized under 800px.

Is there a solution to this? Thanks

$(window).on('load resize', function(event){
      var win = $(this); //this = window
      if (win.width() >= 800) {

        $( "nav" ).addClass( "wide-nav" );

        $('nav.wide-nav li').hover(
          function () {
            $('ul', this).stop().slideDown(200);
          },
          function () {
            $('ul', this).stop().slideUp(200);
          }
        );
    } else  { 
        $( "nav" ).removeClass( "wide-nav" );
    }
});

Answer 1

When the window with is bigger or equals to 800, you are binding the hover event, but when is less than 800, you are not unbinding, so try to unbind the event when you get the resize event:

$(window).on('load resize', function(event){
      var win = $(this); //this = window
      if (win.width() >= 800) {

        $( "nav" ).addClass( "wide-nav" );

        $('nav.wide-nav li').hover(
          function () {
            $('ul', this).stop().slideDown(200);
          },
          function () {
            $('ul', this).stop().slideUp(200);
          }
        );
    } else  { 
        $( "nav" ).removeClass( "wide-nav" );
        $('nav.wide-nav li').off('hover')
    }
});

Answer 2

Try using jQuery's .off() function. In my simple example, it removes resize event handler from window element once window width gets less than 400 pixels.

EDIT: open snippet in the full page to be able to resize it.

 function resizeEventHandler(event) { console.log("Resized"); var win = $(this); console.log(win.width()); if (win.width() < 400) { win.off("resize", "", resizeEventHandler); } } $(window).on('load resize', resizeEventHandler); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>