html - 删除手机屏幕菜单的代码

Question

我有以下代码，它在我的导航中添加/删除了 .show-nav 和 .hide-nav 类。这适用于带有 .toggle-nav 按钮的 .mobile-nav div。

函数.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 是一个全屏覆盖菜单，我只想在移动设备上使用它，所以我删除了屏幕尺寸(>768px)上的 .toggle-nav 按钮。在点击 .toggle-nav 之前，.mobile-nav 保持不可见。

CSS

.toggle-nav { display: none; }

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

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

问题是，如果移动导航处于“打开”状态并且用户将屏幕调大，切换导航按钮将被隐藏，但菜单仍保持打开状态。

基本上，如果屏幕大于 768 像素，我希望应用类 .hide-nav(或删除 .show-nav)。

Answer 1

我已经创建了一个需要完成的事情的简短示例。添加了一些 jquery 代码以使其按照您想要的方式工作。

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>