当我按下“菜单按钮”时,我无法显示导航栏。然而,div似乎出现在代码中,其高度为0
。这是问题的相关代码。你对我如何解决这个问题有什么建议吗?
var onOff = 0;
function dropdown() {
"use strict";
var navbar = document.getElementById("nav_ul");
var ulDiv = document.getElementById("ulDiv");
if (onOff === 0) {
navbar.setAttribute("class", "navShow");
ulDiv.setAttribute("class", "navShow");
onOff = 1;
} else if (onOff === 1) {
navbar.setAttribute("class", "navHide");
ulDiv.setAttribute("class", "navHide");
onOff = 0;
}
}
#ulDiv{
text-align: center;
float: none;
}
ul{
position: relative;
bottom: 0;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
}
li {
display: inline;
padding-top: 0;
margin-top: 0;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 5px;
}
.navHide{
display: none;
}
.navShow{
display: block;
height:auto;
}
@media screen and (max-width: 1005px) {
#ulDiv{
height: auto;
}
#nav_ul{
display: none;
width: 100px;
z-index: 3;
position: absolute;
top: 106px;
left: 0px;
margin: 0px;
padding-bottom: 20px;
}
li{
display: inline-block;
}
}
<header>
<nav id="navbar" class="navbar">
<a href="home.html" id="logoA"><img id="logo" alt="logo" src="logo_dk.jpg"></a>
<button id="menu-but" onclick="dropdown()"><img id="meny-icon" alt="meny icon" src="menu-icon.png"></button>
<div id="ulDiv"><ul id="nav_ul" class="none">
<li><a href="home.html">Forside</a></li>
<li><a href="#">Advokater</a></li>
<li><a href="#">Sagsområder</a></li>
<li><a href="#">Internationalt</a></li>
<li><a href="#">Oplysninger</a></li>
<li><a href="#">Karriere</a></li>
<li><a href="#">Historie</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</nav>
</header>
答案 0 :(得分:-1)
var onOff = 0;
window.dropdown = function() {
"use strict";
var navbar = document.getElementById("nav_ul");
var ulDiv = document.getElementById("ulDiv");
if (onOff === 0) {
navbar.setAttribute("class", "navShow");
ulDiv.setAttribute("class", "navShow");
onOff = 1;
} else if (onOff === 1) {
navbar.setAttribute("class", "navHide");
ulDiv.setAttribute("class", "navHide");
onOff = 0;
}
}
#ulDiv{
text-align: center;
float: none;
display: none;
}
ul{
position: relative;
bottom: 0;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
}
li {
display: inline;
padding-top: 0;
margin-top: 0;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 5px;
}
header .navHide{
display: none;
}
header .navShow{
display: block !important;
height:auto;
}
@media screen and (max-width: 1005px) {
#ulDiv{
height: auto;
}
#nav_ul{
width: 100px;
z-index: 3;
position: absolute;
top: 106px;
left: 0px;
margin: 0px;
padding-bottom: 20px;
}
li{
display: inline-block;
}
}
<header>
<nav id="navbar" class="navbar">
<a href="home.html" id="logoA"><img id="logo" alt="logo" src="logo_dk.jpg"></a>
<button id="menu-but" onclick="window.dropdown()"><img id="meny-icon" alt="meny icon" src="menu-icon.png"></button>
<div id="ulDiv"><ul id="nav_ul" class="none">
<li><a href="home.html">Forside</a></li>
<li><a href="#">Advokater</a></li>
<li><a href="#">Sagsområder</a></li>
<li><a href="#">Internationalt</a></li>
<li><a href="#">Oplysninger</a></li>
<li><a href="#">Karriere</a></li>
<li><a href="#">Historie</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</nav>
</header>
<script>
</script>