Question

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

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

module some_module_name; initial $display(some_package_name::some_function_name); endmodule上有overflow: hidden;，因为菜单为.wrap并且溢出并显示在position: absolute之外，因此菜单不会显示。

从.wrap移除overflow: hidden;（或将其设置为.wrap），菜单会显示。

3行下拉菜单问题

1 个答案: