大家好,我正在尝试制作一个内容垂直和水平居中的全屏导航栏,我实现了我的目标并轻松创建了所有内容,但是有一个问题。我编写了所有代码,但 jquery 代码似乎不工作,我检查了 chrome 的开发者工具,没有类添加到我想要它添加到的标签中。这是我的代码
<div class="toggle"><a><i class="fa fa-bars" aria-hidden="true"></i></a></div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Students</a></li>
<li><a href="#">Contact</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other
</a>
<div class="dropdown-menu dropdown-menu-down" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="comingsoon.html">States</a>
<a class="dropdown-item" href="memes/memes.html">Memes</a>
</div>
</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
.toggle {
position: fixed;
top: 40px;
left: 40px;
z-index: 2;
}
.toggle a {
text-decoration: none;
color: #262626;
font-size: 24px;
cursor: pointer;
}
.menu {
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: #fff;
z-index: 1;
transition: .5s;
}
.menu ul {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.menu ul li {
list-style: none;
}
.menu ul li a {
padding: 10px;
display: inline-block;
font-family:;
font-size: 2em;
text-decoration: none;
text-transform: uppercase;
color: #262626;
text-align: center;
}
.menu.active {
left: 0;
overflow: auto;
}
<script type="text-javascript">
$(document).ready(function() {
$('.toggle a').click(function() {
$('.menu').toggleClass('active');
})
})
</script>
最佳答案
您的代码没问题,您只需将“text-javascript”替换为“text/javascript”
关于jquery - 导航栏切换器点击功能不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59223418/