删除手机屏幕菜单的代码

Question

I have the following code which adds/removes a .show-nav and .hide-nav class to my navigation. This is applied to the .mobile-nav div with the .toggle-nav button.

functions.php

$(function() {

// Bind a click event to anything with the class "toggle-nav"
$('.toggle-nav').click(function() {
    if ($('.mobile-nav').hasClass('show-nav')) {
        $('.mobile-nav').removeClass('show-nav').addClass('hide-nav');

        setTimeout(function() {
            $('.mobile-nav').removeClass('hide-nav');
        }, 500);

    } else {
        $('.mobile-nav').removeClass('hide-nav').addClass('show-nav');
    }

    return false;
});

});

.mobile-nav is a full screen overlay menu which I only want to use on mobile devices so I remove the .toggle-nav button on screen size ( >768px). .mobile-nav remains invisible until .toggle-nav is clicked.

css

.toggle-nav { display: none; }

@media screen and (max-width: 768px) {

.toggle-nav { display: inline-block; }
}

Problem is if the mobile-nav is 'opened' and the user makes the screen large, the toggle-nav button is hidden but the menu remains open.

Basically, I want the class .hide-nav applied (or .show-nav is removed) if the screen goes larger than 768px.

Answer 1

I have created a short example of things need to be done. Added some jquery codes to make it work the way you want .

Step 1 - Add class hide-nav on window width

 /* logic For window width */
  if ($(window).width() > 768) {
    $('.mobile-nav').addClass('hide-nav');
  } else {
    $('.mobile-nav').removeClass('hide-nav');
  }

Step 2 - Add class hide-nav on window resize

  /* logic For Window Resize */
  function resize() {
    if ($(window).width() > 768) {
      $('.mobile-nav').addClass('hide-nav');
    }

    $('.mobile-nav').addClass('hide-nav');
  }

  $(window).resize(resize)
    .trigger('resize');

 $(function() { // Bind a click event to anything with the class "toggle-nav" $('.toggle-nav').click(function() { if ($('.mobile-nav').hasClass('show-nav')) { $('.mobile-nav').removeClass('show-nav').addClass('hide-nav'); setTimeout(function() { $('.mobile-nav').removeClass('hide-nav'); }, 500); } else { $('.mobile-nav').removeClass('hide-nav').addClass('show-nav'); } return false; }); /* logic For window width */ if ($(window).width() > 768) { $('.mobile-nav').addClass('hide-nav'); $('.mobile-nav').removeClass('show-nav'); } else { $('.mobile-nav').removeClass('hide-nav'); } /* logic For Window Resize */ function resize() { if ($(window).width() > 768) { $('.mobile-nav').addClass('hide-nav'); $('.mobile-nav').removeClass('show-nav'); } $('.mobile-nav').addClass('hide-nav'); } $(window).resize(resize) .trigger('resize'); }); 

 .mobile-nav { width: 100px; height: 100px; background: red; } .show-nav { display: block; } .hide-nav { display: none } .toggle-nav { display: none; } @media screen and (max-width: 768px) { .toggle-nav { display: inline-block; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggle-nav">Toggle Nav</div> <div class="mobile-nav"></div>