jquery的树状菜单

<body>

<ul>

<li>一级菜单

<ol>

</ol>

</li>

<li>一级菜单

<ol>

</ol>

</li>

<li>一级菜单

<ol>

</ol>

</li>

<li>一级菜单

<ol>

</ol>

</li>

</ul>

// 树状菜单效果

// 1,点击那个li,那个li中的ol就显示

// 2,li前的+加号,变-减号

// 3,其他li应该隐藏ol,-减号变+加号

// 点击事件的this 如果定义的是匿名函数

// this 指向的是点击的标签

// this 是 js 语法格式,需要使用 $() 转化为jQuery对象形式

$('ul>li').click(function(){

// 通过 this 找到当前点击的标签对象

// 当前点击的li, class切换 , 显示隐藏切换

// 找到其他兄弟 li , 清除 class

// 找到其他兄弟 li , 其中ol 隐藏

$(this).toggleClass('active') // 点击标签,class样式,添加切换效果 + / - 切换

.find('ol').slideToggle() // li中的ol,做显示切换

.parent() // 当前是ol,parent父级是 li

.siblings() // 当前li的兄弟li

.removeClass('active') // 先清除class, -减号变+加号

.find('ol').slideUp() // 找到ol,收起来隐藏

})

</script>

posted on 2020-12-10 13:39 Tsunami黄嵩粟阅读(149) 评论(0) 编辑收藏举报