zoukankan      html  css  js  c++  java
  • 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>
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    头插法链表的基本操作:创建空链表,插入结点,遍历链表,求链表长度,查找结点,删除结点
    尾插法链表拆分
    头插法链表拆分
    尾插法创建链表
    头插法创建链表
    二维数组45度反斜线扫描分析。
    [LeetCode] Binary Search Tree Iterator | 二叉查找树迭代器
    只用递归翻转栈
    [LeetCode] Wiggle Sort II | 摆动排序
    今天回归刷题的日子
  • 原文地址:https://www.cnblogs.com/ht955/p/14113732.html
Copyright © 2011-2022 走看看