时间戳

首页 > 解决方案 > 导航栏隐藏和显示在小屏幕上的切换会弄乱大屏幕

jquery - 导航栏隐藏和显示在小屏幕上的切换会弄乱大屏幕

问题描述

我一直在尝试使用 Flexbox 使我的导航栏可折叠。当屏幕变小时，我让导航栏正确切换。但是当您在较小的屏幕上隐藏导航项目然后将屏幕放大时，导航项目将不会显示。如果我在屏幕较小时将其打开，然后将屏幕变大，导航项目的 flex 方向将设置为当屏幕较大时我不想要的列。

这是我的代码：

$(".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>

标签： jqueryhtmlcss

解决方案

function resiz() {
  $(".toggle-btn").click(function() {
    $(".nav-toggle").slideToggle("slow");
  });
}
resiz();

$(window).on('resize', function() {
  resiz();
});

它会起作用

推荐阅读