我一直在尝试使用汉堡菜单切换来做一个响应式磁带。除了菜单的切换外,还使用了我在网上找到的教程,所有内容都可以使用。当我单击图标时,什么都不会发生。我对此很新,所以我不知道该怎么做。
$(document).ready(function() {
$('nav-menu').click(function() {
$('ul').toggleClass('nav-active');
})
})
.section.menu ul {
display: none;
}
ul.nav-active {
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class='section menu'>
<nav>
<div class="toggle">
<i class="fa fa-bars nav-menu" aria-hidden="true"></i>
</div>
<ul>
<li><a href="#jumpcontent">Über Uns</a></li>
<li><a href="#jumplogin">Login</a></li>
<li><a href="#jumpfeedback">Referenzen</a></li>
<li><a href="#jumpcontact">Kontakt</a></li>
</ul>
</nav>
</div>
您的触发点击的选择器错误。您使用 $('nav-menu')
表示jQuery搜索所有<nav-menu></nav-menu>
标签,但我认为您想要类nav-menu
,因此您应该使用$('.nav-menu')
。
$(document).ready(function() {
// .nav-menu select tags with the class nav-menu
// nav-menu select nav-menu tags
// #nav-menu the tag with the id nav-menu
$('.nav-menu').click(function() {
$('ul').toggleClass('nav-active');
// to check in your console you can do :
console.log('click triggered on nav-menu');
});
}
这是jQuery的选择器。
您需要使用正确的选择器$('.nav-menu')
:
$(document).ready(function(){
$('.nav-menu').click(function(){
$('ul').toggleClass('nav-active');
})
})
.section.menu ul {
display: none;
}
ul.nav-active {
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class='section menu'>
<nav>
<div class="toggle">
<i class="fa fa-bars nav-menu" aria-hidden="true"></i>
</div>
<ul>
<li><a href="#jumpcontent">Über Uns</a></li>
<li><a href="#jumplogin">Login</a></li>
<li><a href="#jumpfeedback">Referenzen</a></li>
<li><a href="#jumpcontact">Kontakt</a></li>
</ul>
</nav>
</div>
<div class='section menu'>
<nav>
<div class="toggle">
<i class="fa fa-bars nav-menu" aria-hidden="true">Toggle Menu</i>
</div>
<ul>
<li><a href="#jumpcontent">Über Uns</a></li>
<li><a href="#jumplogin">Login</a></li>
<li><a href="#jumpfeedback">Referenzen</a></li>
<li><a href="#jumpcontact">Kontakt</a></li>
</ul>
</nav>
</div>
$(document).ready(function(){
$('.toggle').click(function(){
$('ul').toggleClass('nav-active');
});
});