<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的树状菜单的更多相关文章

  1. 自写JQ控件-树状菜单控件[demo下载]

    一个多月没有写博客了,最近也弄一个基于JQ的树状菜单控件,在此分享给大家.另外呢,通过这个例子分享一下怎么写JQ控件的. 事实上工作中,也是经常遇到的,有些时候自己想实现一些前端效果,用网上一些插件吧 ...

  2. MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框

    1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...

  3. 纯CSS打造可折叠树状菜单

    1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...

  4. 菜鸟笔记：node.js+mysql中将JSON数据构建为树（递归制作树状菜单数据接口）

    初学Web端开发,今天是第一次将所学做随笔记录,肯定存在多处欠妥,望大家海涵:若有不足,望大家批评指正. 进实验室后分配到的第一个项目,需要制作一个不确定层级树形菜单的数据接口,对于从来没实战编过程的 ...

  5. 学用纯CSS打造可折叠树状菜单

    随着CSS3的发布,国外研究正如火如荼,但在国内还有很多人抱着IE不支持CSS3的想法,始终无动于衷不肯去学习.但是历史告诉我们,好的东西必将盛行,CSS3也终将也会替代CSS2,下面就和大家分享一个 ...

  6. C#winform菜单权限分配，与菜单同步的treeView树状菜单权限控制使用心得

    在网上查了很多,发现没有讲述关于--C#winform菜单权限分配,与菜单同步的treeView树状菜单权限控制使用--的资料 自己研究了一个使用方法.下面来看看. 我有两个窗体:LOGINFRM,M ...

  7. js, 树状菜单隐藏显示

    js写的不是很严谨~~~嘿嘿   <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. 后台树状菜单，js实现递归无限分类

    //新闻类别管理 public function new_classify() { $arr = M('news_classify')->where("fid = 0")-& ...

  9. js树状菜单

    html部分 <ul class="tree"> <li><span><a href="#">JavaScrip ...

  10. GUI自绘_其中左边树状菜单控件风格灵感来源于城市博物馆的壁灯效果。

    GUI DEMO 下面都是去年做的演示DEMO,到目前为止,除了专门做界面库的公司,暂时还没有看到别人做的效果比我这个更好的. 下图在第一张图中有个错误,看出来了没有呢? 就是项目核算那儿,不应该是B ...

随机推荐

  1. 学习 XQuery：XML数据查询的关键

    XQuery 是 XML 数据的查询语言,类似于 SQL 是数据库的查询语言.它被设计用于查询 XML 数据. XQuery 示例 for $x in doc("books.xml" ...

  2. 力扣344(java & python)-反转字符串（简单）

    题目: 编写一个函数,其作用是将输入的字符串反转过来.输入字符串以字符数组 s 的形式给出. 不要给另外的数组分配额外的空间,你必须原地修改输入数组.使用 O(1) 的额外空间解决这一问题. 示例 1 ...

  3. 力扣13(java)-罗马数字转整数（简单）

    题目: 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值I 1V 5X 10L 50C 100D 500M 1000例如, 罗马数字 2 写做 II ,即为两个并列的 1 ...

  4. MaxCompute Spark 资源使用优化祥解

    简介: 本文主要讲解MaxCompute Spark资源调优,目的在于在保证Spark任务正常运行的前提下,指导用户更好地对Spark作业资源使用进行优化,极大化利用资源,降低成本. 本文作者:吴数傑 ...

  5. AI运动：阿里体育端智能最佳实践

    简介: 过去一年,阿里体育技术团队在端智能方面不断探索,特别在运动健康场景下实现了实践落地和业务赋能,这就是AI运动项目.AI运动项目践行运动数字化的理念,为运动人口的上翻提供了重要支撑,迈出了阿里体 ...

  6. 第8讲 browse命令的使用技巧

    第8讲 browse命令的使用技巧 1.浏览所有parts,使用技巧 选中工程文件*.dsn/Edit/Browse/Parts.列出工程中用到的所有元件,方便在画完原理图后,查看哪些元件没有编号或数 ...

  7. ansible系列(35)--ansible实战之部署WEB集群架构（5）

    目录 1. 整体测试 1.1 运行playbook 1.2 出口路由器防火墙规则设置 1.3 访问测试 1. 整体测试 1.1 运行playbook playbook的整体运行过程如下(因为之前都运行 ...

  8. 报错：Client does not support authentication protocol requested by server； consider upgrading MySQL cli

    IDEA启动项目登录时显示用户或密码错误 或者 连接mysql数据库时报错 原因: mysql8 之前的版本中加密规则是mysql_native_password,而在mysql8之后,加密规则是ca ...

  9. PageOffice 在线打开 word 文件并添加水印

    一.服务器端方法插入水印 1.插入文字水印 WordDocument doc = new WordDocument(); //添加水印 ,设置水印的内容 doc.getWaterMark().setT ...

  10. 使用tc命令模拟linux网络延迟环境

    tc(Traffic Control)是 Linux 中用于流量控制和网络模拟的强大工具.你可以使用它来模拟网络延迟.带宽限制.数据包丢失等. 以下是一个使用 tc 模拟网络延迟的基本步骤: 1.查看 ...