删除移动屏幕菜单的代码

Question

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

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 是一个全屏覆盖菜单，我只想在移动设备上使用它，所以我删除了屏幕尺寸 (>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 代码以使其按您想要的方式工作。

第 1 步 - 在窗口宽度

上添加类hide-nav

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

第 2 步 - 在 窗口调整大小

上添加类 hide-nav

  /* 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>