Функция отмены jQuery, если размер окна изменяется

Question

У меня есть вот эта jQuery функция:

$("#show-nav").click(function() {
  $("nav").toggle();
});

nav {
  display: block;
}

#show-nav {
  display: none;
}

@media screen and (max-width: 700px) {
  nav {
    display: none;
  }
  #show-nav {
    display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="show-nav">Show navigation</div>

<nav>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Thre</li>
  </ul>
</nav>

Эта навигация должна иметь функцию переключения на маленьких экранах. Поэтому я работал с @media screen и спрятал его для размеров экрана под 700px.

Проблема: если вы скрываете навигацию в области под 700px и меняете размеры, то окно браузера становится больше, навигация все еще невидим.

Есть ли возможность отменить jQuery действий с изменением размера окна браузера?

Answer 1

Вам необходимо добавить код css, который будет всегда отображать навигацию, если размер браузера превышает 700 пикселей. Поэтому вы можете использовать следующий код:

@media screen and (min-width: 701px) {
    nav { display: block !important }
}

Если у вас все еще есть проблемы с реализацией этого. Пожалуйста, отредактируйте свой вопрос, указав полный код вместе с HTML, CSS и jQuery. Я определенно помог бы в дальнейшем.