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

Question

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

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

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

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

＆＃13;

＆＃13;

$( document ).ready(function() {

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

＆＃13;

/* 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;
  }
  
  
  
  
  
  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

export class TaskDetailComponent implements OnInit { @Input() task: Task; constructor(private scheduleService: ScheduleService) { } ngOnInit() { } onSelected() { this.scheduleService.buttonClicked.emit(this.task); } } 会将元素的slideToggle应用于display:none属性，因此您无法使用样式表覆盖该属性，因此您必须侦听窗口的调整大小事件并相应地显示菜单，这里是一个小提琴：https://jsfiddle.net/5xr41460/10/

style

Answer 2

您可以在javascript中使用窗口调整大小来检查视口宽度并更改样式。

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

或使用jquery

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