problem with window.onresize()

Question

I am creating a responsive dropdown menu using the same html structure (without creating a structure larger than 1024 and another smaller than 1024), when clicking the icone of the dropdown menu ul li appear, however if I leave the menu open smaller than 1024 and increase the screen, the menu disappears(because of jquery that uses None display to hide), I did the following routine in jquery:

window.onresize = function () {
    if ($(window).width() > 1008) {
        $(".nav ul").css("display", "block");
        $(".nav").removeClass("menu_responsive");
        $(".ico_menu_dropdown").removeClass("ico_menu_aberto");
    }
    else {
        $(".nav ul").css("display", "none");
    }
}

however when I enter the phone and give a scrol down (with the menu open) the menu hides. From what I understand jquery is understanding onresize as scroll. Someone has had the same problem?

Answer 1

function verificar_tamanho(){
  var tamanho_largura = $(window).width();
    if (tamanho_largura > 1008) {
    executa o codigo;
    }else{
    executa codigo;
    }
}
$(window).resize(function () {
    verificar_tamanho();
});
$(document).ready(function () {
    verificar_tamanho();
});

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

You can use the above function to check, it will perform the function when loading the document and when changing the screen width. You can also use media screen.

@media screen and (max-width: 1024){
  .div_display{
    display: none;
  }
}
@media screen and (min-width: 1024){
  .div_display{
    display: block;
  }
}