问单击时，当我调整页面大小时导航栏保持隐藏

EN

@media screen and (min-width: 667px) {
  .slide {
    display: block!important;
  }
}

$('.navbar-toggle').on('click', function(){
        $('.slide').toggle();
        return false;
      });

.navbar{
    display: flex;
    align-items: center;
    padding: 20px;
}

.slide {
    display: block;
}

.navbar-toggle {
    flex: 1;
    text-align: right;
    display: inline-block;
    list-style: none;
    cursor: pointer;
    display: none;
}


@media screen and (max-width: 667px) {
    .navbar-toggle {
        display: block;
    }
    .slide {
        display: none;
    }
}

@media screen and (min-width: 667px) {
  .slide {
    display: block!important;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="navbar" class="navbar">
      <div class="logo">
          <a href="index.html"><img src="images/logo.png" width="125px" alt="logo"></a>
      </div>
      <nav>
          <ul class="slide">
              <li><a href="#home">Home</a></li>
              <li><a href="#products">Products</a></li>
              <li><a href="#contact">Contact</a></li>  
          </ul>
          <a class="navbar-toggle">
              <i class="fa fa-bars"></i>
          </a> 
      </nav>
  </div>

$(window).on('resize', function () {
    if ($(window).width() > 667) {
        $('.slide').show();
    }
});