我一直在尝试使用Flexbox使导航栏可折叠。我让导航栏在屏幕变小时正确切换。但是，当你将导航项目隐藏在较小的屏幕上，然后将屏幕变大时，导航项目不会显示。如果我在屏幕变小的时候把它打开，然后把屏幕变大，导航项目的灵活方向设置为列，当屏幕变大的时候我不想要。
这是我的代码：
$(".toggle-btn").click(function() {
$(".nav-toggle").slideToggle("slow");
});/* header */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2em;
background-color: #FFB600;
box-shadow: 0 1px 20px #48493e;
z-index: 1;
}
header ul {
display: flex;
}
/*slide menu*/
.nav-btn {
display: none;
position: absolute;
top: 0;
right: 0;
margin: 3.5em 4em 0 0;
}
.toggle-btn {
position: relative;
padding: 0;
width: 4em;
height: 2em;
cursor: pointer;
outline: none;
font-size: 1.2em;
font-family: 'Dosis', sans-serif;
font-weight: bold;
box-shadow: 5px 5px 5px 1px #000;
text-transform: uppercase;
border-radius: 4px;
border: solid 2px #000;
background-color: transparent;
}
.toglge-btn:active {
box-shadow: 3px 3px 5px 1px #000;
top: 2px;
}
@media all and (max-width: 820px) {
header {
flex-direction: column;
}
.nav-brand {
align-self: flex-start;
}
.nav-btn {
display: block;
}
header ul {
flex-direction: column;
text-align: center;
display: none;
}
.nav-items {
line-height: 2;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h2 class="nav-brand"><a href="/"> Tequila Grill</a></h2>
<div class="nav-btn">
<button class="toggle-btn">Menu</button>
</div>
<ul class="nav-toggle">
<li><a class="nav-items" href="/">Home</a></li>
<li><a class="nav-items" href="/menu">Menu</a></li>
<li><a class="nav-items" href="/hours">Hours</a></li>
<li><a class="nav-items" href="/location">Location</a></li>
<li><a class="nav-items" href="/catering">Catering</a></li>
</ul>
</header>给你，兄弟
@media all and (min-width: 821px) {
ul.nav-toggle[style] {
display:flex!important;
}
}
这将告诉它在所有视图端口大小821px及更大的端口上添加样式display:flex;。[style]选择器像JS一样内联插入css。
https://jsfiddle.net/ud8fqxmL/5/
function resiz() {
$(".toggle-btn").click(function() {
$(".nav-toggle").slideToggle("slow");
});
}
resiz();
$(window).on('resize', function() {
resiz();
});
它将工作