调整浏览器窗口大小时不显示响应式导航栏答案

【问题标题】：responsive navbar not showing when resizing browser window调整浏览器窗口大小时不显示响应式导航栏
【发布时间】：2018-04-08 21:17:06
【问题描述】：

更改浏览器窗口的大小时，如果导航栏关闭并且我从移动视图转到桌面，导航栏将保持关闭状态并且不再可见。

如果我执行上述操作，但在触发导航栏打开然后更改浏览器窗口的大小后，导航栏仍然可见。

如何确保在桌面查看时导航栏始终可见？

这是从我的项目中提取的完整代码：

$( document ).ready(function() {

  $( "#navButton" ).click(function() {
    $( ".navigation" ).slideToggle( "slow", function() {
    });
  });
  
  });

/* nav */
.navigation {
  list-style: none;
  margin: 0; 
  background-color: #333333;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: flex-end;
}

.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: #ffffff;
  justify-content: space-between;
}

.navigation li {
  list-style-type: none;
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: center;
}

.navigation a:hover {
  background: #444444;
  color: #61D6D6;
}

@media all and (max-width: 800px) {
  
  .navigation li {
    display: block;
    flex-direction: column;
  }
  
  .navigation {
    justify-content: space-around;
    display: none;
  }
  
  #navButton {
    display: block;
  }
  
  
  
  
  
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<nav>
    <div class="masthead">
      <div class="order-1 logoBox">
        <img alt="" src="images/logoPH.png" style="width: 50px; height: auto;">
      </div>
      <div class="order-2 item-grow-2">
        <div class="title"><h2>Lorem ipsum</h2></div>
      </div>
      <div class="order-2 item-grow-1 navMenuBox">
        <div id="navButton"><p><i class="fas fa-bars"></i> <br><span>menu</span></p></div>
      </div>
    </div>
    <ul class="navigation">
      <li><a class="active" href="#">sed do eiusmod</a></li>
      <li><a class="" href="#">adipisicing</a></li>
      <li><a class="" href="#">elit</a></li>
      <li><a class="" href="#">consectetur</a></li>
    </ul>
  </nav>

【问题讨论】：

这是我在使用响应式菜单时遇到的一个常见问题，但我不再为此烦恼，因为访问者不会通过调整窗口大小来播放并关闭菜单然后再次调整大小。所以我想这不是一个真正的问题，而是一个特殊的使用案例
是的，我同意这不会成为一个常见问题，但我仍然认为这是一个我想解决的问题。如果访问者在多任务处理时只是将两个窗口并排放置，然后在完成后再次增加大小，则可能会触发此问题。
在这种情况下，唯一的解决方案是让一个监听器来调整窗口大小，然后在桌面上显示导航。

标签： javascript html css

【解决方案1】：

slideToggle 将display:none 应用于元素的style 属性，因此您不能用样式表覆盖它，因此您必须侦听窗口的大小调整事件并相应地显示菜单，这是一个小提琴：https://jsfiddle.net/5xr41460/10/

$(document).ready(function() {

  $("#navButton").click(function() {
    $(".navigation").slideToggle("slow", function() {});
  });
  $(window).on('resize', function() {

    if ($(this).width() > 800) {
      $('.navigation').css({
        'display': 'flex'
      });
    } else {
      $('.navigation').css({
        'display': 'none'
      });
    }
  });
});

【讨论】：

【解决方案2】：

您可以在 javascript 中使用 on window resize 来检查视口宽度并更改样式。

window.onresize = function(event) {
    ...
};

或使用 jquery

$(window).resize(function () { /* do something */ });

【讨论】：