所以我正在为学校编写一个网站。我想制作一个响应迅速并向下折叠的菜单。我不能让它向上或向下折叠。我使用了 JavaScript、Css3 和 Html5。仅使用 JavaScript、Css3 和 Html5 可能无法做到这一点。我会接受其他编程语言，但我更愿意使用这三种语言。
Javascript:
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += "responsive";
} else {
x.className = "topnav";
}
}
HTML5:
<body>
<div class="topnav" id="myTopnav">
<ul class="topnav">
<li><a href="index.html"><img class="home" alt="home" src="http://projekpeople.com/wp/student2/wp-content/uploads/sites/3/2015/09/home-logo-hi.png"></a></li>
<li><a class="subjects" href="webdesign_important.html">IMPORTANT SUBJECTS</a></li>
<li><a class="subjects" href="webdesign_opdrachten.html">OPDRACHTEN</a></li>
<li><a class="subjects" href="webdesign_css.html">CSS FILES</a></li>
<li><a class="subjects" href="webdesign_donate.html">DONATE</a></li>
<li><a class="subjects" href="webdesign_aboutme.html ">ABOUT ME</a></li>
<li><a class="subjects" href="webdesign_form.html">FORM</a>
<li class="icon">
<a class="menu" href="javascript:void(0);" style="font-size: 20px;" onclick="myFunction()">☰</a>
</li>
</ul>
</div>
CSS3:
.topnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FFF;
text-align: right;
float: right;
}
ul.topnav li {float: right;}
ul.topnav li a {
display: inline-block;
color: rgba(0, 0, 0, 0.5);
text-align: right;
padding: 16px 20px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
list-style-type: none;
height: 25px;
}
ul.topnav li a:hover {background-color: #ddd;}
ul.topnav li.icon {display: none;}
@media screen and (max-width:1200px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
list-style-type: none;
}
}
@media screen and (max-width:1300px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
list-style-type: none;
}
ul.topnav.responsive li {
float: none;
display: inline;
list-style-type: none;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
list-style-type: none;
}
}
.menu {
text-decoration: none;
list-style-type: none;
height: 20px;
width: auto;
}
ul.topnav {
text-align: center;
}
这可能是一个愚蠢的错误，但仍然感谢您花时间帮助我的人! :D
最佳答案
尝试在'responsive'之前加一个空格
像这样:
x.className += " responsive"
类之间用空格隔开
希望就是这样。 :-).
关于javascript - 下拉菜单报错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41511193/