我正在尝试使用 jquery 创建移动导航菜单。我在那里有脚本,它正在切换类,但没有任何反应。
我已经在另一个网站上进行了此操作,并进行了相同的设置,但在这里不起作用。
我尝试在 youtube 和 Overstack 上查找。我查看了其他几篇有类似问题的帖子,并尝试了一些方法,但没有任何效果。
$('.handle').on('click', function() {
$('.navsmall').toggleClass('.showing');
});
.handle {
width: 100%;
padding: 8px;
background-color: #222;
text-transform: uppercase;
font-family: sans-serif;
font-weight: bold;
text-align: center;
padding-left: 40%;
cursor: pointer;
}
.handle a:hover {
color: #5069ec;
text-shadow: 1px 1px 1px #111;
}
.handle::after {
position: relative;
content: '\2630';
padding-right: 5px;
}
.navsmall_container {
width: 100%;
display: none;
}
.navsmall {
overflow: hidden;
/* display: none; */
width: 100%;
box-sizing: border-box;
list-style: none;
text-align: center;
font-family: sans-serif;
text-align: right;
margin: 0;
padding: 0 15px 0 0;
-webkit-transition: max-height 1s;
-ms-transition: max-height 1s;
-moz-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
}
.navsmall li {
cursor: pointer;
line-height: 1.5em;
}
.navsmall li:hover {
background-color: #bbb;
color: #5069ec;
text-shadow: 1px 1px 3px #111;
}
@media screen and (max-width: 667px) {
.handle {
display: block;
}
.navsmall_container {
display: block;
}
.navsmall {
max-height: 0;
}
.showing {
display: block;
max-height: 20em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="navsmall_container">
<div class="handle">
<a href="#">menu</a>
</div>
<ul class="navsmall">
<li>
<a href="#"></a> home</li>
<li>
<a href="#"></a>hook</li>
<li>
<a href="#"></a>about</li>
<li>
<a href="#"></a>extra</li>
<li>
<a href="#"></a>registration</li>
<li>
<a href="#"></a>contact</li>
</ul>
</div>
这应该使菜单显示并从 handle 上下拉。 ul 的类在开发 View 中切换,但在实际 View 中没有任何反应。
我这里也有测试页面。如果需要更多代码,请访问 www.uma-clt.com/nav_test.html。
最佳答案
删除.toggleClass中的点,常见错误,我也经常发生;-)
示例:
$(".handle").on("click", function() {
$(".navsmall").toggleClass("showing");
});
关于jquery的toggleClass View 没有变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57799383/