javascript - Change dropdown menu when resizing via jquery -

i want change way dropdown menu works depending on screen resolution. i'm doing via jquery.

above 1024px ul.level-2 menu shows when cursor hovers on button , below 1024px reacts on click. works when refreshing page on different screens not work when resizing page - $(window).resize(). when resize browser 1024px lower still reacts on hover. how can make work? advice appreciated.

codepen: https://codepen.io/miunik/pen/gqwydg

html

<ul class="level-1">   <li>1 level item     <ul class="level-2">       <li>2 level item</li>       <li>2 level item</li>       <li>2 level item</li>       <li>2 level item</li>     </ul>   </li>   <li>1 level item     <ul class="level-2">       <li>2 level item</li>       <li>2 level item</li>       <li>2 level item</li>       <li>2 level item</li>     </ul>   </li> </ul> 

jquery

$(document).ready(function() {   function setnav() {     if (window.outerwidth < 1024) {       $('.level-1 li').on({         click: function() {           $(this).children('.level-2').toggleclass('open');         }       });     } else if (window.outerwidth > 1024) {       $('.level-1 li').on({         mouseenter: function() {           $(this).children('.level-2').addclass('open');         },         mouseleave: function() {           $(this).children('.level-2').removeclass('open');         }       });     }   }   setnav()   $(window).resize(function() {     setnav();     console.log(window.outerwidth);   });  }); 

the issue because have binded mouseenter , mouseleave function element.

to solve unbind mouseenter , mouseleave actions element.

  $(window).resize(function() {      $('.level-1 li').unbind( "mouseenter" );      $('.level-1 li').unbind( "mouseleave" );      setnav();      console.log(window.outerwidth);   });