<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. 云原生之在kubernetes集群下部署mysql应用

    一.Mysql介绍 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库.MySQL是一种开源的关系型数据库管理系统,可将数据保存在不同的表中,而不是将所有数据放在一个大的仓库内,从而 ...

  2. linux系统关闭指定端口

    linux系统关闭指定端口 关闭指定端口 firewall-cmd --zone=public --remove-port=80/tcp --permanent systemctl restart f ...

  3. 力扣1662(java&python)-检查两个字符串数组是否相等(简单)

    题目: 给你两个字符串数组 word1 和 word2 .如果两个数组表示的字符串相同,返回 true :否则,返回 false . 数组表示的字符串 是由数组中的所有元素 按顺序 连接形成的字符串. ...

  4. 力扣412(java)-Fizz Buzz(简单)

    题目: 给你一个整数 n ,找出从 1 到 n 各个整数的 Fizz Buzz 表示,并用字符串数组 answer(下标从 1 开始)返回结果,其中: answer[i] == "FizzB ...

  5. HarmonyOS NEXT应用开发案例—状态栏显隐变化

    介绍 本示例介绍使用Scroll组件的滚动事件 onScroll 实现状态栏显隐变化.该场景多用于各种软件的首页.我的等页面中. 效果预览图 使用说明 加载完成后显示状态栏显隐变化页面,上下拖动屏幕, ...

  6. 5年磨一剑|优酷Android包瘦身治理思路全解

    简介: 稳定性.性能.包大小,在移动端基础用户体验领域"三分天下",是app承载业务获得稳定.高效.低成本.快速增长的重要基石.其中,包大小对下载转化率.拉新拉活成本等方面的影响至 ...

  7. 关于CDN的原理、术语和应用场景那些事

    关于CDN,想必你一定看过很多官方的解释.今天,CDN百科第七期,将用一篇3844字的文章,来带你了解CDN的诞生.术语.原理.特征以及应用场景,看完这篇文章,相信你将会对CDN这项互联网基础设施有更 ...

  8. dotnet 推荐 LightWorkFlowManager 轻量的工作过程管理库

    本文将和大家推荐我团队开源的 LightWorkFlowManager 轻量的工作过程管理库,适合任何需要执行工作过程的应用逻辑,可以方便将多个工作过程拼凑起来,且自动集成重试和失败处理,以及日志和上 ...

  9. 使用 Kafka Assistant,为您的开发加速

    简要介绍 快速查看所有 Kafka 集群,包括Brokers.Topics和Consumers 支持各种认证模式:PLAINTEXT.SASL_PLAINTEXT.SSL.SASL_SSL 对Kafk ...

  10. SAP集成技术(三)接口管理的挑战

    接口管理不是一个新概念,在云应用出现之前,就有接口管理问题,和混合场景相比,不同应用间的集成更为常见.经典的问题包括:哪个工具是我的使用场景中的正确选择?如何操作我的集成平台?如何设计组织?以及如何保 ...