jquery - 3行下拉菜单问题

Question

我在响应式手机上显示下拉菜单时遇到问题。 请参阅testing page并调整您的浏览器或检查您的手机。请注意，三行图标下拉菜单将不会显示。

单击 3 行图标时，它调用 JS toggleClass = "active"以显示 HTML 中的现有菜单，但没有任何反应。我做错了什么？

HTML

<div class="wrap">
    <nav class="menu">
        <ul class="active">
            <li class="active"><a href="#home">Home</a></li>
            <li><a href="#logo">Logos</a></li>
            <li><a href="#banner">Banners</a></li>
            <li><a href="#email">Email/Promotions</a></li>
            <li><a href="https://dribbble.com/search?q=Christian+Luneborg">Art</a></li>
            <li><a href="#website">Websites</a></li>
            <li><a href="#mobile">Mobiles</a></li>
            <li><a href="https://www.linkedin.com/in/christian-luneborg-bb13431b" target="_blank"><img src="img/linkedin-logo-sm.png" /></a></li>
        </ul>
      <a class="toggle-nav" href="#">&#9776;</a>
    </nav>
</div>

CSS

@media screen and (max-width: 860px) {
.menu {
    position:relative;
    display:inline-block;
}

.menu ul.active {
    display:none;
}

.menu ul {
    width:100%;
    position:absolute;
    top:120%;

    background:#1e1e1e;
}

.menu ul:after {
    width:0px;
    height:0px;
    position:absolute;
    top:0%;
    content:'';
    transform:translate(0%, -100%);
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-bottom:7px solid #303030;

}

.menu li {
    margin:5px 0px 5px 0px;
    float:left;
    display:block;

}

.menu a {
    display:block;

}

.toggle-nav {
    float:left;
    display:inline-block;
    background:#1e1e1e;
    color:#777;
    font-size:20px;
    transition:color linear 0.10s;

}

.toggle-nav:hover, .toggle-nav.active {
    text-decoration:none;
    color:#66a992;
}
}

JS

jQuery(document).ready(function() {
    jQuery('.toggle-nav').click(function(e) {
    jQuery(this).toggleClass('active');
    jQuery('.menu ul').toggleClass('active');

    e.preventDefault();
    });
});

Answer 1

您在 .wrap 上有 overflow: hidden; 并且由于菜单是 position: absolute 并且溢出和显示在 .wrap 之外。

从 .wrap 中删除 overflow: hidden;(或将其设置为 overflow: visible;)，菜单将显示。