我正在尝试定制这个菜单.
这是 html 标记:
<ul class="topnav" id="myTopnav">
<li id="links"><a href="#home">Home</a></li>
<li id="links"><a href="#news">News</a></li>
<li id="links"><a href="#contact">Contact</a></li>
<li id="links"><a href="#about">About</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
CSS :
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}
@media screen and (max-width:1180px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
还有JS:
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
我正在尝试添加此选项以使菜单在用户单击任何列表项后关闭 -
$(document).ready(function($) {
$('#links').click(function() {
$("#myTopnav").removeClass("topnav");
});
});
但这似乎不起作用。
知道如何解决这个问题吗?
The id
属性在同一文档中应该是唯一的,按类替换重复的属性:
<ul class="topnav" id="myTopnav">
<li class="links"><a href="#home">Home</a></li>
<li class="links"><a href="#news">News</a></li>
<li class="links"><a href="#contact">Contact</a></li>
<li class="links"><a href="#about">About</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
使用类选择器.
在你的JS代码中:
$(document).ready(function($) {
$('.links').click(function() {
$("#myTopnav").removeClass("responsive");
});
});
NOTE :你必须删除responsive
类而不是topnav
.
希望这可以帮助。
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
$(document).ready(function($) {
$('.links').click(function() {
$("#myTopnav").removeClass("responsive");
});
});
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}
@media screen and (max-width:1180px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="topnav" id="myTopnav">
<li class="links"><a href="#home">Home</a></li>
<li class="links"><a href="#news">News</a></li>
<li class="links"><a href="#contact">Contact</a></li>
<li class="links"><a href="#about">About</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)