一款基于jQuery制作的网站左侧展开收缩图标导航菜单代码,收缩时只显示图标,展开时则显示图标和菜单名称,还支持二级菜单。
js代码
<script src="jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
//展开收起
$(".btn-nav").click(function () {
$(".lvc-wrap").toggleClass("lvc-close")
$("ol").toggleClass("small-ol")
$(".next-layer ol").hide()
if($("#lvc-nav").hasClass('lvc-close')){
$(".next-layer ").removeClass("arrow")
}
})
//选中状态
$(".lvc-nav li").click(function () {
$(this).siblings().find('ol').hide()
$(this).addClass("active").siblings().removeClass("active")
})
//选中子集清除父级active
$("ol>li").click(function (e) {
console.log('ol>li clicked')
e.stopPropagation()
$(this).parent().parent().removeClass("active")
})
//二级导航展开收起
$(".next-layer").click(function () {
$(this).children("ol").toggle();
$(this).toggleClass("arrow").siblings().removeClass("arrow")
})
$("ol li").click(function () {
if($("ol").hasClass('small-ol')) {
$(".small-ol").hide();
$(this).parent().parent().addClass("active")
}
})
})
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791