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是一个全屏叠加菜单，我只想在移动设备上使用，因此我删除屏幕尺寸上的.toggle-nav按钮（＆gt; 768px）。 .mobile-nav在点击.toggle-nav之前保持不可见。

CSS

.toggle-nav { display: none; }

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

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

问题是移动导航是否已打开＆＃39;并且用户使屏幕变大，切换导航按钮被隐藏但菜单保持打开状态。

基本上，如果屏幕大于768px，我希望应用类.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>

删除移动屏幕菜单的代码

1 个答案: