jquery的树状菜单
Posted ht955
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery的树状菜单相关的知识，希望对你有一定的参考价值。
<body>
<ul>
<li>一级菜单
<ol>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ol>
</li>
<li>一级菜单
<ol>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ol>
</li>
<li>一级菜单
<ol>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ol>
</li>
<li>一级菜单
<ol>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ol>
</li>
</ul>
<script src="./jquery.min.js"></script>
<script>
// 树状菜单效果
// 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>
以上是关于jquery的树状菜单的主要内容，如果未能解决你的问题，请参考以下文章