当改变浏览器窗口的大小时,如果导航栏关闭并且我从移动视图转到桌面,则导航栏将保持其关闭状态并且不再可见。
如果我执行上述操作,但在触发导航栏打开然后更改浏览器窗口的大小后,导航栏仍然可见。
如何在桌面查看时确保导航栏始终可见?
这是从我的项目中取消的完整代码:
$( 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>
&#13;
答案 0 :(得分: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
答案 1 :(得分:0)
您可以在javascript中使用窗口调整大小来检查视口宽度并更改样式。
window.onresize = function(event) {
...
};
或使用jquery
$(window).resize(function () { /* do something */ });