Javascript 如何使用导航栏解决此问题？
下面的代码可以在移动设备上制作一个汉堡图标，当用户点击它时，屏幕上就会出现一个波浪，覆盖了屏幕上的所有内容。但是我有一个问题，波不能覆盖输入 我的问题是如何使输入消失在波浪下 这是HTML：Javascript 如何使用导航栏解决此问题？,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,下面的代码可以在移动设备上制作一个汉堡图标，当用户点击它时，屏幕上就会出现一个波浪，覆盖了屏幕上的所有内容。但是我有一个问题，波不能覆盖输入 我的问题是如何使输入消失在波浪下 这是HTML： <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel=”stylesheet” href=”css/bootstrap-responsive.css”>
<link rel="stylesheet" href="css.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<nav id="nav-bar">
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<h3 id="brand">BRAND</h3>
<ul class="nav-links">
<li class="menu"><a class="items" href="#">Home</a></li>
<li class="menu"><a class="items" href="#">Contact</a></li>
<li class="menu"><a class="items" href="#">Create Account</a></li>
<li class="menu"><a class="items" href="#">Login</a></li>
</ul>
</nav>
<section class="s1">
<header class="shorten">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in wow zoomIn" data-wow-delay="0.3s">Hello world</div>
<div class="intro-heading wow pulse" data-wow-delay="2.0s">Hello world</div>
<div class="row wow rotateInUpLeft" data-wow-delay="0.3s">
<div class="col-sm-8 col-sm-offset-2">
<form method="post" accept-charset="utf-8" id="shorten" class="form-inline"><div style="display:none;"><input type="hidden" name="_method" value="POST" /><input type="hidden" name="_csrfToken" autocomplete="off"/></div>
<div class="form-group">
<input type="text" name="url" placeholder="Your URL Here" required="required" class="form-control input-lg" id="url" />
<input type="hidden" name="ad_type" value="2" />
<button class="btn-captcha" id="invisibleCaptchaShort" type="submit"><img src="Right-Arrow.png" alt="" /></button></div>
<div style="display:none;"><input type="hidden" name="_Token[fields]" autocomplete="off" /></div>
</form>
<div class="shorten add-link-result"></div>
</div>
</div>
</div>
</div>
</header>
/section>
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener("click", () => {
navLinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle("fade");
});
});
您应该只在.nav-links.open中添加z-index:1样式 编辑CSS，如下所示： .nav-links.open{ 剪辑路径：在90%-10%的范围内循环1000px； -webkit剪辑路径：在90%-10%范围内循环1000px； 指针事件：全部； z-index:1；//添加此行
} 您应该只在.nav-links.open中添加z-index:1样式 编辑CSS，如下所示： .nav-links.open{ 剪辑路径：在90%-10%的范围内循环1000px； -webkit剪辑路径：在90%-10%范围内循环1000px； 指针事件：全部； z-index:1；//添加此行
}尝试将z-index属性应用于导航栏css选择器查看有关z-index属性的详细信息尝试将z-index属性应用于导航栏css选择器查看有关z-index属性的详细信息写入z-index时它不起作用：-1；输入消失。很抱歉，您应该将z-index:1添加到.nav-links.open。我修改了我的答案。当我写z-索引时，它不起作用：-1；输入消失。很抱歉，您应该将z-index:1添加到.nav-links.open。我编辑了我的答案。这解决了问题，但汉堡图标也消失了，因此用户不能再次单击以使波浪返回。。。无论如何，我得到了一个有用的答案，它解决了问题，解决了问题，但汉堡包图标也消失了，所以用户不能再次点击，使波回来。。。无论如何，我得到了一个有用的答案，它解决了问题
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener("click", () => {
navLinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle("fade");
});
});