本文介绍如何使用jQuery制作侧边栏多级菜单展开折叠效果
主要js与解析
<script>
var topics = document.querySelectorAll(".catalog ul li");
for (var topic of topics) {
var icon = topic.querySelector(".link > .icon")
icon.onclick = function (e) {
var topic = this.parentNode.parentNode;
topic.classList.toggle("unfold")
topic.classList.toggle("fold")
e.stopPropagation();
}
topic.ondblclick = function (e) {
this.classList.toggle("unfold")
this.classList.toggle("fold")
e.stopPropagation();
}
}
function cataExpand() {
$('.catalog ul').find('li.foldable').each(function () {
//展开
$(this).removeClass('fold foldable');
$(this).addClass('unfold foldable');
});
$("#btn_expand").hide();
$("#btn_collapse").attr("style", "display:inline-block;");
}
function cataCollapse() {
$('.catalog ul').find('li.foldable').each(function () {
//折叠
$(this).removeClass('unfold foldable');
$(this).addClass('fold foldable');
});
$("#btn_collapse").hide();
$("#btn_expand").attr("style", "display:inline-block;");
}
cataCollapse();
</script>
