<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. OS如何保持对计算机的控制权？

    前面我们提到:OS希望在保持控制权的同时,为用户提供高性能的并发. 那么OS究竟是如何保持对计算机的控制权呢?这似乎是一个令人迷惑(但很重要!)的问题:OS也是进程,自然也需要计算资源.那既然我们希望 ...

  2. 如何使用鞋厂ERP等企业管理软件提高企业运营整体效率？

    ERP把企业客户需求.市场规划.产品研发.内部制造等活动以及供应商的资源整合在一起,形成企业一个完整的产业链和供应链,通过企业多个环节的无缝链接和整体运作来提高企业运营整体效率: (1) . 对整个产 ...

  3. NIFI简介

    NIFI简介 首先是官网地址:Apache NiFi,不过会百度的估计都能搜到 因为后面的工作一定会用到,所以大致的听了一下讲解操作之类的 大概感觉就是NIFI是个web端的一种控制数据走向的工具?可 ...

  4. 从KPI到OKR，高阶产品人如何推动业务高速增长

    简介: 不管是核心大目标,还是O(Objectives),或者北极星指标,奇妙等式等等,最后都需要核心组织协同方式来推动整个目标聚焦以及过程的落地. 作为产品经理人,相信很多人都遇到过以下的灵魂拷问: ...

  5. 形式化验证工具TLA+：程序员视角的入门之道

    ​简介: 女娲是飞天分布式系统中提供分布式协同的基础服务,支撑着阿里云的计算.网络.存储等几乎所有云产品.在女娲分布式协同服务中,一致性引擎是核心基础模块,支持了Paxos,Raft,EPaxos等多 ...

  6. OpenTK 垂直同步对刷新率的影响

    本文将和大家介绍 Vsync 垂直同步的开启对 OpenTK 应用的刷新率的影响 在上一篇博客 OpenTK 入门 初始化窗口 告诉了大家如何初始化 OpenTK 承载 OpenGL 的窗口的应用,在 ...

  7. 开发日志：企业微信实现扫码登录（WEB）

    一:获取扫码登陆所需的参数:appid,secret,agentid 登录企业微信:https://work.weixin.qq.com/ 扫码登录文档:https://work.weixin.qq. ...

  8. AtCoder Beginner Contest 333

    总结 人生第一次掉rating 各种降智操作 A 水题 B 逆天操作 WA了3发 第三次交的时候以为过了,等到切完E发现怎么B还没过( #include<bits/stdc++.h> us ...

  9. SAP Adobe Form 教程四 动态隐藏和显示字段

    前文: SAP Adobe Form 教程一 简单示例 SAP Adobe Form 教程二 表 SAP Adobe Form 教程三 日期,时间,floating field 本文链接:https: ...

  10. .Net 8.0 下的新RPC，IceRPC之试试的新玩法"打洞"

    作者引言 很高兴啊,我们来到了IceRPC之试试的新玩法"打洞",让防火墙哭去吧 试试RPCs的新玩法"打洞" 比较典型的玩法:RPC数据流从客户端流向服务端, ...