我不知道如何在下面的内容上制作下拉幻灯片。内容现在只是一个大黑盒子，但它仍然会被按下而不是留在原地。如何使下拉列表滑过此内容，而不是向下推页面内容？
<div class="menu-icon" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div style="display:none;" class="nav-dropdown">
<a href="#">How It Works</a>
<a href="#">FAQ</a>
<a href="#">PRIVACY AND SECURITY</a>
<a href="#">SUPPORT</a>
<a style="border-bottom: none;" href="#">GET EARLY ACCESS</a>
</div>
These script tags are for clicking the dropdown to make it toggle slide.
<script>
$(document).ready(function() {
$(".menu-icon").click(function() {
$(".nav-dropdown").slideToggle();
});
});
</script>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
.nav-dropdown {
background-color: rgb(27, 27, 31);
display: flex;
flex-flow: column nowrap;
}
我已经检查了您的代码，它按预期工作。有什么问题？
这里是一个例子
.nav-dropdown {
background-color: rgb(27, 27, 31);
display: flex;
flex-flow: column nowrap;
color:white;
position: absolute;;
left:0;
top:100%;
z-index:999;
}<!DOCTYPE html>
<html>
<head>
<style>
.menu-icon {
width: 100px;
height: 100px;
background-color: blue;
color: white;
position:relative;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".menu-icon").click(function(){
$(".nav-dropdown").slideToggle();
});
});
</script>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</head>
<body>
<div class="menu-icon" onclick="myFunction(this)">
click here
<div style="display:none;" class="nav-dropdown">
<a href="#">How It Works</a>
<a href="#">FAQ</a>
<a href="#">PRIVACY AND SECURITY</a>
<a href="#">SUPPORT</a>
<a style="border-bottom: none;" href="#">GET EARLY ACCESS</a>
</div>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letrase</p>
</body>
</html>