javascript - JSFiddle下拉按钮不可点击
问题描述
我正在创建一个测试下拉菜单。打开菜单按钮工作正常,但关闭按钮不可点击/悬停/等。当按下打开菜单按钮时,它应该使另一个可见和可点击。
不知道为什么关闭按钮不起作用,它的display
属性被设置回block
点击时。
function menu_change() {
var burg = document.getElementById("burg");
var cross = document.getElementById("cross");
var body_freeze = document.getElementById("body_freeze");
var nav_list = document.getElementById("nav_list");
var nav_items = document.getElementsByClassName("nav_item");
if (burg.style.display === 'none') {
burg.style.display = 'block';
cross.style.display = 'none';
nav_list.style.display = 'none';
body_freeze.style.position = 'relative';
} else {
burg.style.display = 'none';
cross.style.display = 'block';
nav_list.style.display = 'block';
body_freeze.style.position = 'fixed';
}
}
.fixed_nav {
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 50px;
background-color: white;
border-bottom: 1px solid black;
box-shadow: 0 4px 8px 0 rgb(0, 0, 0, .2);
}
#burg {
z-index: 3;
float: right;
display: block;
margin: 20px;
width: 100px;
height: auto;
}
#burg:hover {
background-color: gray;
}
#cross {
z-index: 3;
margin: 20px;
display: none;
float: right;
width: 100px;
height: auto;
}
#cross:hover {
background-color: gray;
}
#nav_list {
height: 100vh;
width: 100%;
background-color: white;
display: none;
z-index: 1;
}
#dummy_text {
margin-top: 50px;
}
.nav_item {
margin-top: 50px;
color: red;
width: 100%;
background-color: white;
border-top: 1px solid black;
border-bottom: 1px solid black;
z-index: 2;
}
#body_freeze {}
<html>
<head>
<title>ExampleError</title>
</head>
<body>
<nav class="fixed_nav">
<button id="burg" onclick="menu_change();">
☰
</button>
<button id="cross" onclick="menu_change();">
˟
</button>
<ul id="nav_list">
<div class="nav_item">
<a href="#">
<li>Inventory</li>
</a>
</div>
<div class="nav_item">
<a href="#">
<li>Finance</li>
</a>
</div>
</ul>
</nav>
<div id="body_freeze">
<p id="dummy_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis elementum nibh tellus molestie nunc non blandit massa. Sit amet purus gravida quis blandit. Ac feugiat sed lectus vestibulum
mattis ullamcorper velit. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Egestas sed tempus urna et pharetra pharetra massa massa. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Rutrum tellus pellentesque
eu tincidunt tortor aliquam nulla facilisi. In pellentesque massa placerat duis. Erat velit scelerisque in dictum non. Massa placerat duis ultricies lacus sed turpis tincidunt. Urna molestie at elementum eu facilisis sed odio. Ornare arcu odio ut
sem nulla. Consequat interdum varius sit amet mattis vulputate. Justo donec enim diam vulputate ut. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Risus at ultrices mi tempus. Vestibulum morbi blandit cursus risus at ultrices
mi tempus. Ante metus dictum at tempor commodo. Turpis nunc eget lorem dolor. Leo vel orci porta non pulvinar neque. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Proin sed libero enim sed faucibus. Lacus vel facilisis volutpat
est velit. Scelerisque eleifend donec pretium vulputate sapien. Curabitur gravida arcu ac tortor. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Viverra aliquet eget sit amet tellus cras. Massa tempor nec feugiat nisl pretium
fusce id velit ut. Ultrices sagittis orci a scelerisque. Bibendum arcu vitae elementum curabitur vitae nunc sed. Enim ut sem viverra aliquet. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Sed euismod nisi porta lorem mollis aliquam.
Ridiculus mus mauris vitae ultricies. Ullamcorper velit sed ullamcorper morbi. Adipiscing elit pellentesque habitant morbi tristique. Nibh venenatis cras sed felis eget velit. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan.
Porttitor eget dolor morbi non arcu risus quis varius. Tortor aliquam nulla facilisi cras fermentum odio eu. In iaculis nunc sed augue lacus viverra vitae congue. Ac felis donec et odio pellentesque diam volutpat. Ut lectus arcu bibendum at varius
vel pharetra vel. Feugiat in ante metus dictum at. Diam sit amet nisl suscipit. Nam aliquam sem et tortor. Arcu ac tortor dignissim convallis aenean et. Sed risus ultricies tristique nulla aliquet enim tortor at. Rhoncus dolor purus non enim praesent
elementum facilisis. Integer feugiat scelerisque varius morbi enim nunc faucibus a. At varius vel pharetra vel turpis nunc eget lorem. Quam adipiscing vitae proin sagittis. Gravida cum sociis natoque penatibus. Eu feugiat pretium nibh ipsum consequat
nisl vel. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Fringilla ut morbi tincidunt augue interdum velit euismod in. Enim tortor at auctor urna nunc. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Arcu
cursus euismod quis viverra nibh cras pulvinar mattis. A diam maecenas sed enim. Tortor id aliquet lectus proin nibh nisl condimentum. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Venenatis tellus in metus vulputate. Mollis nunc sed
id semper risus. Lacus luctus accumsan tortor posuere ac ut consequat semper. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.
</p>
</div>
</body>
</html>
解决方案
您的问题是您将元素“body_freeze”定义为固定,但没有定义他的确切位置,因此它覆盖了阻止您单击它的按钮。我编辑了您的代码,并在样式定义中为您的 id body_freeze 添加了位置、顶部和 z-index 道具。
function menu_change() {
var burg = document.getElementById("burg");
var cross = document.getElementById("cross");
var body_freeze = document.getElementById("body_freeze");
var nav_list = document.getElementById("nav_list");
var nav_items = document.getElementsByClassName("nav_item");
if (burg.style.display === 'none') {
burg.style.display = 'block';
cross.style.display = 'none';
nav_list.style.display = 'none';
body_freeze.style.position = 'relative';
} else {
burg.style.display = 'none';
cross.style.display = 'block';
nav_list.style.display = 'block';
body_freeze.style.position = 'fixed';
}
}
.fixed_nav {
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 50px;
background-color: white;
border-bottom: 1px solid black;
box-shadow: 0 4px 8px 0 rgb(0, 0, 0, .2);
}
#burg {
z-index:3;
float: right;
display: block;
margin: 20px;
width: 100px;
height: auto;
}
#burg:hover
{
background-color: gray;
}
#cross {
z-index:3;
margin:20px;
display: none;
float: right;
width:100px;
height:auto;
}
#cross:hover
{
background-color: gray;
}
#nav_list {
height: 100vh;
width: 100%;
background-color: white;
display: none;
z-index: 1;
}
#dummy_text {
margin-top: 50px;
}
.nav_item {
margin-top:50px;
color: red;
width:100%;
background-color:white;
border-top:1px solid black;
border-bottom: 1px solid black;
z-index:2;
}
#body_freeze {
position: relative;
top: 100px;
z-index: 1;
}
<html>
<head>
<title>ExampleError</title>
</head>
<body>
<nav class="fixed_nav">
<button id="burg" onclick="menu_change();">
☰
</button>
<button id="cross" onclick="menu_change();">
˟
</button>
<ul id="nav_list">
<div class="nav_item">
<a href="#">
<li>Inventory</li>
</a>
</div>
<div class="nav_item">
<a href="#">
<li>Finance</li>
</a>
</div>
</ul>
</nav>
<div id="body_freeze">
<p id="dummy_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis elementum nibh tellus molestie nunc non blandit massa. Sit amet purus gravida quis blandit. Ac feugiat sed lectus vestibulum
mattis ullamcorper velit. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Egestas sed tempus urna et pharetra pharetra massa massa. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Rutrum tellus pellentesque
eu tincidunt tortor aliquam nulla facilisi. In pellentesque massa placerat duis. Erat velit scelerisque in dictum non. Massa placerat duis ultricies lacus sed turpis tincidunt. Urna molestie at elementum eu facilisis sed odio. Ornare arcu odio
ut sem nulla. Consequat interdum varius sit amet mattis vulputate. Justo donec enim diam vulputate ut. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Risus at ultrices mi tempus. Vestibulum morbi blandit cursus risus at ultrices
mi tempus. Ante metus dictum at tempor commodo. Turpis nunc eget lorem dolor. Leo vel orci porta non pulvinar neque. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Proin sed libero enim sed faucibus. Lacus vel facilisis volutpat
est velit. Scelerisque eleifend donec pretium vulputate sapien. Curabitur gravida arcu ac tortor. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Viverra aliquet eget sit amet tellus cras. Massa tempor nec feugiat nisl pretium
fusce id velit ut. Ultrices sagittis orci a scelerisque. Bibendum arcu vitae elementum curabitur vitae nunc sed. Enim ut sem viverra aliquet. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Sed euismod nisi porta lorem mollis
aliquam. Ridiculus mus mauris vitae ultricies. Ullamcorper velit sed ullamcorper morbi. Adipiscing elit pellentesque habitant morbi tristique. Nibh venenatis cras sed felis eget velit. Leo integer malesuada nunc vel risus commodo viverra maecenas
accumsan. Porttitor eget dolor morbi non arcu risus quis varius. Tortor aliquam nulla facilisi cras fermentum odio eu. In iaculis nunc sed augue lacus viverra vitae congue. Ac felis donec et odio pellentesque diam volutpat. Ut lectus arcu bibendum
at varius vel pharetra vel. Feugiat in ante metus dictum at. Diam sit amet nisl suscipit. Nam aliquam sem et tortor. Arcu ac tortor dignissim convallis aenean et. Sed risus ultricies tristique nulla aliquet enim tortor at. Rhoncus dolor purus
non enim praesent elementum facilisis. Integer feugiat scelerisque varius morbi enim nunc faucibus a. At varius vel pharetra vel turpis nunc eget lorem. Quam adipiscing vitae proin sagittis. Gravida cum sociis natoque penatibus. Eu feugiat pretium
nibh ipsum consequat nisl vel. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Fringilla ut morbi tincidunt augue interdum velit euismod in. Enim tortor at auctor urna nunc. Dolor sed viverra ipsum nunc aliquet bibendum enim
facilisis gravida. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. A diam maecenas sed enim. Tortor id aliquet lectus proin nibh nisl condimentum. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Venenatis tellus in metus
vulputate. Mollis nunc sed id semper risus. Lacus luctus accumsan tortor posuere ac ut consequat semper. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.
</p>
</div>
</body>
</html>
推荐阅读
- sql - 如何计算使用 WITH 子句创建的临时表中的记录数
- arrays - 将 mxn 2D-Array 初始化为 0
- python - 删除具有较低值的列表中的重复字典
- javascript - JavaScript 和 Google API 服务帐户私钥格式
- angular - 在全局路由监听器中访问路由数据
- python - 在 Python 中聚类集群或合并集群以减少组数(Python)
- javascript - 如何从 Vue 中的 prop 对象访问单个元素
- python - 获取子标签值等于某物的html标签文本
- grails - 刷新 grails 服务类
- angular - NGRX 选择器在键值对象更改时触发