javascript - 响应式下拉汉堡菜单

Question

我用著名的汉堡包图标创建了一个下拉导航菜单。当页面加载时和/或向下滚动页面之前，它会完美地下降，但是如果我向下滚动然后向上滚动，当我单击图标时，它会将导航 ul 列表切成两半，不再显示它的内容在滚动之前做了。我不确定为什么会这样做。

这是脚本:

<script>
 $(document).ready(function (){
  $('.nav-btn').on("click", function() {
    $('#main-nav').slideToggle("slow");
     $(window).resize(function() {
        if($(window).width() > 600) {
            $("#main-nav").removeAttr("style");
            }
        });
    });
    });
</script>

这是 HTML(在 header 内):

<span class="nav-btn"></span>
    <nav id="main-nav">
        <ul>
            <li><a href="#home" class="scroll">HOME</a></li>
            <li><a href="#about" class="scroll">ABOUT</a></li>
            <li><a href="#portfolio" class="scroll">PORTFOLIO</a></li>
            <li><a href="#contact" class="scroll">CONTACT</a> </li>
        </ul>
    </nav>  

这是CSS:

#main-nav {
    text-align: center;
    display: none;
    background-color: #F1F1F1;
}

#main-nav li {
    display: block;
    border-bottom: 5px #565656 solid;
    padding: 5px 0 5px 0;
}

#main-nav li:last-child {
    border-bottom: none;
}

#main-nav ul li {
    font-size: 1em;
    font-family: 'montserratregular';
    text-align: left;
}

.nav-btn {
    display: block;
    background-color: #F1F1F1;
    color: #333;
    font-size: 40px;
    text-align: left;
    cursor: pointer;
}

.nav-btn:before {
    content: url("hamburger.png");
    padding-left: 15px;
}

Answer 1

您有一个 JavaScript 在 #headwrapper div 上应用 130px 的高度。

<div id="headwrapper" class="" style="height: 130px;">

当我将 130px 移出菜单时，菜单会正常运行。它似乎将其添加到滚动上，所以当我滚动回顶部时，JavaScript 会再次启用它。尝试将其更改为 height: auto 或者不要设置固定高度，尝试将其设置为 height: auto; max-height: 1000px; 或类似的东西。这应该可以解决您遇到的问题。

编辑*:我建议不要像您那样更改内联高度，而是建议在 .small 上放置 max-height: 75px; 并添加 高度:自动； max-height: 1000px; 在您的 #headwrapper 上。如果您将其与 css-transition 一起使用，它应该会给您带来与现在相同的效果。