调整大小后消失的导航栏

Question

我的项目网站上有响应式导航栏。当屏幕宽度低于 968px 时，带有滑动菜单的汉堡菜单。但是当我再次调整屏幕大小时（所以 'normal' 宽导航栏应该再次出现）导航栏消失了！

我认为这与我 main.js 文件中的 JS 函数有点冲突。这是它的内容：

$(document).on('click', 'a[href^="#"]', function (event) {
  event.preventDefault();
  $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 1400);
});

$(document).ready(function(){
  $(".hamburger").on('click', function(event) {
    event.preventDefault();
    $(".navigation-list").toggle();
  });
});

所以我在 JS 文件中有两个函数。首先制作点击anchor时的滑动效果。第二个 shows/hides 单击时的汉堡菜单。那么为什么导航栏消失了？

这是link：

https://jsfiddle.net/2s7Lnxb6/

我认出来是因为toggle()函数的缘故

Answer 1

通过添加另一个 class 说 hide 你可以使用 toggleClass('hide')

$(document).ready(function(){
    $(".hamburger").on('click', function(event) {
        event.preventDefault();
        $(".navigation-list").toggleClass('hide');
    });
});

.topbar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.navigation-list {
    display: flex;
    flex-direction: column;
    text-align: center;
    list-style: none;
    max-height : 300px; /* here */
    overflow:hidden; /* here */
    transition: all 0.3s linear; /* here */
}
.navigation-list.hide { /* here */
    max-height : 0px;
    overflow:hidden;
    transition: all 0.3s linear;
}
.navigation-list-item.hover {
    padding: 10px;
    flex: 1;
    background: #a6b9cd;
    list-style: none;
    font-family: "Open Sans", sans-serif;
}

.center-logo {
    display: none;
}

.navigation-list-item a {
    color: #363636;
    text-decoration: none;
    font-size: 1em;
}

.navigation-list-item.hover {
    transition: 0.1s linear;
}

.navigation-list-item.hover:hover {
    background: #f8f8ff;
}

.hamburger-container {
    text-align: center;
    font-size: 2em;
    background-color: #a6b9cd;
}

.hamburger:hover {
    cursor: pointer;
}
@media screen and (min-width: 968px) {
    .hamburger-container {
        display: none;
    }
    .navigation-list {
        display: unset;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        text-align: center;
        line-height: 70px;
        height: 70px;
        white-space: nowrap;
    }
    .navigation-list.hide {  /* here */
       max-height : 100px;
    }
    .navigation-list-item {
        flex: 1;
        background: #a6b9cd;
        list-style: none;
        font-family: "Open Sans", sans-serif;
    }

    .navigation-list-item a {
        text-decoration: none;
        font-size: 1em;
    }

    .center-logo {
        padding: 0;
        display: unset;
        flex: 1;
        width: 100px;
        background: #a6b9cd;
        border: 5px solid #a6b9cd;
        border-radius: 50%;
    }

    .navigation-list-item.hover {
        padding: 0;
        transition: 0.3s linear;
    }

    .hamburger:hover {
        cursor: pointer;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="topbar clearfix">
  <nav class="navigation">
      <div class="hamburger-container">
          <a href="#" class="hamburger"><span>HAMBURGER</span></a>
      </div>
      <ul class="navigation-list">
          <li class="navigation-list-item hover"><a href="#anchor-home">Item1</a></li>
          <li class="navigation-list-item hover"><a href="#features">Item2</a></li>
          <li class="navigation-list-item hover"><a href="#add-info">Item3</a></li>
          <li class="navigation-list-item"><img src="https://www.elecosoft.com/wp-content/uploads/2014/04/example-logo.png" class="center-logo" alt="page logo"></li>
          <li class="navigation-list-item hover"><a href="#anchor-form">Item4</a></li>
          <li class="navigation-list-item hover"><a href="#team">Item5</a></li>
          <li class="navigation-list-item hover"><a href="#anchor-contact">Item6</a></li>
     </ul>
  </nav>
</div>

调整大小后消失的导航栏

Dissapearing navbar after resizing

javascript

jquery

toggle

navbar