Question

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

我认为这与我的main.js文件中的JS函数存在冲突。以下是其中的内容：

src/arc4random.c

所以我在JS文件中有两个函数。首先点击锚点时产生滑动效果。第二个在点击时显示/隐藏汉堡包菜单。那导航为什么会消失呢？

这是链接：

https://jsfiddle.net/2s7Lnxb6/

我认识到这是因为toggle（）函数。

Answer 1

通过添加另一个类hide，您可以使用toggleClass('hide')

＆＃13;

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

＆＃13;

.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;
    }
}

＆＃13;

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

＆＃13;

调整大小后消除导航条

1 个答案: