gpt4 book ai didi

jquery - 3行下拉菜单问题

转载 作者:太空宇宙 更新时间:2023-11-04 01:53:56 25 4
gpt4 key购买 nike

我在响应式手机上显示下拉菜单时遇到问题。请参阅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();
});
});

最佳答案

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

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

关于jquery - 3行下拉菜单问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42937874/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com