我尝试在点击时创建一个下拉菜单。当我单击“菜单”并在我的导航栏上的 0 max-height 和 20 em max-height 之间转换时，我试图切换两个类。但是正如我所看到的，当我的最大高度为 0 时，它会像占位符一样占用空白。我不想要那样，因为它弄乱了我对网站的看法。 我在考虑 display:block 和 display:none 但我知道你不能在这两者之间转换。当我单击指定位置时，有什么方法可以在单击时创建下拉菜单吗？ 编辑:
我有这个代码:
html:
<header>
<nav>
<div class="handle">Menu</div>
<ul>
<li><a id="active" href="index.html">HOME</a></li>
<li><a href="collection.html">PRODUCTS</a></li>
<li><a href="events.html">EVENTS</a></li>
<li><a href="info.html">CONTACT</a></li>
</ul>
</nav>
</header>
和CSS:
.handle{
width: 100%;
background:#333333;
text-align: left;
box-sizing: border-box;
padding:15px 10px;
cursor: pointer;
display: none;
color: white;
box-sizing: border-box;
}
@media (max-width:980px){
.showing{
max-height:20em ;
}
nav ul{
max-height: 0;
}
}
和 JS:
$(document).ready(function () {
$('.handle').on('click', function () {
$('nav ul').toggleClass('showing')
});
});
标题还有一些样式，但我认为并不重要。抱歉，如果我不清楚。
最佳答案
这段代码对我有用。希望能有所帮助...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>On click Menu</title>
<style>
.handle{
width: 100%;
background:#333333;
text-align: left;
box-sizing: border-box;
padding:15px 10px;
cursor: pointer;
color: white;
box-sizing: border-box;
}
.hide {
display: none;
}
</style>
</head>
<body>
<nav>
<div class="handle">Menu</div>
<ul class="hide">
<li><a id="active" href="index.html">HOME</a></li>
<li><a href="collection.html">PRODUCTS</a></li>
<li><a href="events.html">EVENTS</a></li>
<li><a href="info.html">CONTACT</a></li>
</ul>
</nav>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.handle').on('click', function() {
$('nav ul').slideToggle();
});
});
</script>
</body>
</html>
关于javascript - CSS 下拉菜单 onclick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31998846/