当我调整页面大小时，点击导航栏仍然隐藏答案

【问题标题】：On click navbar remains hidden when I resize page当我调整页面大小时，点击导航栏仍然隐藏
【发布时间】：2021-05-29 03:29:21
【问题描述】：

我正在尝试为我的导航栏做一个切换按钮。在小于 667px 的屏幕上，我想隐藏我的导航栏并显示切换按钮。点击它应该显示和隐藏导航栏 li。

切换按钮在max-width: 667px 上可以正常工作，但是当我调整大小时，导航栏仍然隐藏在大于 667 像素的屏幕宽度上

HTML

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

CSS


.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;
    }
}

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

});

【问题讨论】：

在需要显示菜单的地方使用min-width 声明，它保持隐藏状态，因为您通过切换将其设置为display:none。

标签： javascript html jquery css

【解决方案1】：

为min-width 添加!important 标志，它应该可以正常工作：

@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>

【讨论】：

【解决方案2】：

您需要添加一个单独的事件侦听器，该侦听器在事件发出时触发一个函数。 jQuery 提供监听窗口大小调整事件的功能，使用 .on('resize')。每当您调整窗口大小时都会触发。在你的 JavaScript 文件中使用这段代码

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

【讨论】：