jquery "hasClass" does not work

* EDITED THE HTML CODE * It is a wordpress. I had to rewrite the menu so you could see it. I made a mistake when copying it.

I am setting up my navigation menu and I can not find the problem in the following code so that the drop-down menu will open. The issue is that when I open the element inspector if the element to which the class has to be added is "illuminated" but it does not. If I do checks with console.log if it works for me.

Any help? this is the code

    jQuery('.nav-icon').click(function(){

       if ( jQuery('.menu-header-menu-container').hasClass('open-nav') ) {
         jQuery('.menu-header-menu-container').removeClass('open-nav');

      } else {
         jQuery('.menu-header-menu-container').addClass('open-nav');
      }

       jQuery(this).toggleClass('opened');
    });

HTML code

<div class="masthead container">
  <div class="masthead-nav">
    <h1 class="logo"><a href="index.html">GlobalDisplays</a></h1>

    <div class="masthead-block">
        <nav class="menu-header-menu-container">
            <ul id="menu-header-menu">
                <li><a href="index.html">Home</a></li>
                <li><a href="portfolio.html">Trabajos</a></li>
                <li><a href="agencia.html">La Agencia</a></li>
                <li> <a href="#"><span>Productos</span></a>
                    <ul>
                        <li><a href="http://www.boxpromotions.com/shops/catalogo.asp" target="_blank">Mkt Promocional</a></li>
                        <li><a href="http://pendrivesusb.com/?p=b034424f6c362cbb5c402cee220d2b1f" target="_blank">USB</a></li>
                        <li><a href="http://www.catalogoblancodebanderas.com/" target="_blank">Banderas y soportes exteriores</a></li>
                    </ul>
                </li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contacto.html">Contacto</a></li>
            </ul>
        </nav>

        <div class="search-icon"></div>

        <div class="nav-icon">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</div>

This is the code I have in the functions. I believe that everything is fine. I do not know what you think:

function gd_load_scripts(){

    /*  ====== CSS ======  */
    wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', array(), '1.0', 'all' );
    wp_enqueue_style( 'owl-carousel', get_template_directory_uri() . '/css/owl.carousel.min.css', array(), '1.0', 'all' );
    wp_enqueue_style( 'owl-theme-carousel', get_template_directory_uri() . '/css/owl.theme.default.min.css', array(), '1.0', 'all' );

    /*  ====== GOOGLE FONTS ======  */
    wp_enqueue_style( 'open-sans', 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700' );
    wp_enqueue_style( 'raleway', 'https://fonts.googleapis.com/css?family=Raleway:300,400,700' );


    /*  ====== JS ======  */
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery_google','https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js',array(),null,true );
    wp_enqueue_script( 'jquery_google' );

    wp_register_script( 'owl', get_template_directory_uri() . '/js/owl.carousel.min.js', array('jquery_google'), '1.0.0', true );
    wp_enqueue_script( 'owl' );

    wp_register_script( 'app', get_template_directory_uri() . '/js/app.min.js', array('jquery_google'), '1.0.0', true );
    wp_enqueue_script( 'app' );
}

add_action( 'wp_enqueue_scripts', 'gd_load_scripts' );

The following is the one corresponding to the span:

.nav-icon {
    display: none;
    width: 25px;
    height: 25px;
    margin-left: rem(24);
    position: relative;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
}

.nav-icon span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #333;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}