在我的网站上，我有一个汉堡包菜单，它只在屏幕的 width 小于 415px 时显示。因此，当您单击汉堡包图标时，它会起作用，但是当您单击“工作”或“联系人”之类的按钮时，不会弹出任何内容。假设有一个弹出式 div 或容器，其侧面有一个 x 图标和空白 div。我一直在搜索这个字面上 4 个小时，但找不到任何东西。这是我的 html，其余的将上传到 codepen。
演示:https://codepen.io/anon/pen/jBmzRq
HTML
<div id="jobs-popup">
<img id="x-icon1" src="web%20x%20icon%20white.png">
<div class="jobs-content">
<a href="mailto:support@magictouchapp.com" target="_top" class="email"></a>
</div>
</div>
<!--End Section for Jobs Popup -->
<!-- Section for contact popup -->
<div id="contact-popup">
<img id="x-icon2" src="web%20x%20icon%20white.png">
<div id="contact-content">
<a href="mailto:support@magictouchapp.com" target="_top" class="email"></a>
</div>
</div>
<!-- End Section for Contact Popup -->
<!-- Section for Press popup -->
<div id="press-popup">
<img id="x-icon3" src="web%20x%20icon%20white.png">
<div id="press-content">
<a href="mailto:support@magictouchapp.com" target="_top" class="email"></a>
</div>
</div>
<!-- End section Press -->
<!-- Section for legal popup -->
<div id="legal-popup">
<img id="x-icon4" src="web%20x%20icon%20white.png">
<div id="legal-content">
<a href="mailto:support@magictouchapp.com" target="_top" class="email"></a>
</div>
</div>
<!-- End section Legal -->
<!-- Section for Support -->
<div id="support-popup">
<img id="x-icon5" src="web%20x%20icon%20white.png">
<div id="support-content">
<a href="mailto:support@magictouchapp.com" target="_top" class="email"></a>
</div>
</div>
<div id="top-bar">
<a class="burger-nav"></a>
<div id="nav-bar">
<ul>
<li><a class="nav-list" href="#" id="jobs">Jobs</a></li>
<li><a class="nav-list" href="#" id="contact">Contact</a></li>
<li><a class="nav-list" href="#" id="press">Press</a></li>
<li><a class="nav-list" href="#" id="legal" id="legal-under">Legal</a></li>
<li><a class="nav-list" href="#" id="support" id="support-under">Support</a></li>
</ul>
</div>
</div>
<div id="container">
<div id="background">
</div>
<ul id="menu">
</ul>
<div id="name-div">
<h1 id="name">Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>最佳答案
您是否尝试添加下拉菜单
<!DOCTYPE html>
<html>
<head>
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
</head>
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</body>
</html>
关于javascript - 如何使我的导航栏再次可点击？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42744043/