前台特效（9）无限极分类折叠菜单

最新推荐文章于 2022-12-30 14:21:34 发布
最新推荐文章于 2022-12-30 14:21:34 发布
阅读量172 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/longdidi/archive/2013/04/23/3037917.html
版权

     在程序中经常会用到无限极分类菜单，经常性的会被绕的头昏脑胀，整理了一个简洁的方式，希望对你有帮助，轻喷！！

<!DOCTYPE html>
<!-- by longdd 2013.4.23-->
<html>
    <head>
        <title>无限极分类折叠菜单</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            body{background-color:#B5BDBF;}
            .types ul{
                display:none;
                border: solid 1px #000;
            }
            .types li span{
                display:block;
                max-width: 150px;
                height: 30px;
                line-height: 30px;
                border:solid 1px #000;
                border-radius: 5px;
                margin: 5px;
                text-align: center;
            }
            .types>ul{
                display:block;
            }
        </style>
        <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
        <script type="text/javascript">
            $(function() {
                $('.types li').each(function(i) {
                    $(this).click(function(event) {
                        //阻止冒泡事件
                        event.stopPropagation();
                        if ($(this).children('ul').css('display') === 'block') {
                            $(this).children('ul').css('display', 'none');
                        } else {
                            $(this).children('ul').css('display', 'block');
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <div class="types">
            <ul>
                <li>
                    <span>选项1</span>
                    <ul>
                        <li>
                            <span>选项1-1</span>
                            <ul>
                                <li><span>选项1-1-1</span></li>
                                <li><span>选项1-1-2</span></li>
                                <li><span>选项1-1-3</span></li>
                                <li><span>选项1-1-4</span></li>
                                <li><span>选项1-1-5</span></li>
                            </ul>
                        </li>
                        <li>
                            <span>选项1-2</span>
                            <ul>
                                <li><span>选项1-2-1</span></li>
                                <li><span>选项1-2-2</span></li>
                                <li><span>选项1-2-3</span></li>
                                <li><span>选项1-2-4</span></li>
                                <li><span>选项1-2-5</span></li>
                            </ul>
                        </li>
                        <li><span>选项1-3</span></li>
                        <li><span>选项1-4</span></li>
                        <li><span>选项1-5</span></li>
                    </ul>
                </li>
                <li>
                    <span>选项2</span>
                    <ul>
                        <li>
                            <span>选项2-1</span>
                            <ul>
                                <li><span>选项2-1-1</span></li>
                                <li><span>选项2-1-2</span></li>
                                <li><span>选项2-1-3</span></li>
                                <li><span>选项2-1-4</span></li>
                                <li><span>选项2-1-5</span></li>
                            </ul>
                        </li>
                        <li><span>选项2-2</span></li>
                        <li><span>选项2-3</span></li>
                        <li><span>选项2-4</span></li>
                        <li><span>选项2-5</span></li>
                    </ul>
                </li>
                <li>
                    <span>选项3</span>
                    <ul>
                        <li>
                            <span>选项3-1</span>
                            <ul>
                                <li><span>选项3-1-1</span></li>
                                <li><span>选项3-1-2</span></li>
                                <li><span>选项3-1-3</span></li>
                                <li><span>选项3-1-4</span></li>
                                <li><span>选项3-1-5</span></li>
                            </ul>
                        </li>
                        <li><span>选项3-2</span></li>
                        <li><span>选项3-3</span></li>
                        <li><span>选项3-4</span></li>
                        <li><span>选项3-5</span></li>
                    </ul>
                </li>
                <li><span>选项4</span></li>
                <li><span>选项5</span></li>
            </ul>
        </div>
    </body>
</html>

//----------------------------------------------by londd------------------------------------------------//

转载于:https://www.cnblogs.com/longdidi/archive/2013/04/23/3037917.html

weixin_33758863
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript+CSS无限极分类效果完整实现方法
10-23
主要介绍了JavaScript+CSS无限极分类效果完整实现方法,涉及JavaScript针对页面元素节点遍历与动态操作技巧,需要的朋友可以参考下
Javascript无限分类树
weixin_43938253的博客
03-01 440
Javascript无限分类树 页面中经常用到树菜单，大部分树菜单列表都是由后端处理，前端直接使用。或者前端生成固定层级的树菜单列表。 文章目录Javascript无限分类树普通列表改造为无限树列表一、普通列表改造为无限树列表二、无限树菜单dom渲染全部代码css样式总结 普通列表改造为无限树列表 我是因为在工作中被要求把一个二级菜单改造为支持三级菜单，且菜单列表仅是个list，不支持树，改造的过程中突发奇想万一后面再需要我继续改造四级，或者其他功能也需要这样显示，那我岂不是要重复很多工作任务，于是我决
php实现无限极分类，js遍历显示无限极分类的json数组
null
04-11 641
数据库设计如下：pid代表父id,默认为0(顶级分类) 引用的方法如下：（递归的方法会降低性能） function generateTree($data){ $items=array(); foreach($data as $v){//将数组存入$items,且$items的键为$data中的id $items[$v['id']] = $v; } $tree=...
js无限分类递归树
c.j.h_code的博客
11-16 1599
首先了解一下什么是无限分类递归树（树形分类），如下示例： const arr = [ { id: 1, pid: 0, name: '1' }, { id: 2, pid: 0, name: '2' }, { id: 3, pid: 1, name: '3' }, { id: 4, pid: 3, name: '4' }, { id: 5, pid: 4, name: '5' }, { id: 6, pid: 2, nam
无限级分类children
china773728236的博客
04-24 936
php无限级分类并且把子分类包含进父类中 $data = [ ['id'=>'1','data_name'=>'四川','pid'=>'0'], ['id'=>'2','data_name'=>'江苏','pid'=>'0'], ['id'=>'3','data_name'=>'重庆','pid'=>'0'], ['id'=>'4','data_name'=>'成都','pid'=>'1'], ['id'=>'5','d
tp5框架前台无限极导航菜单类实现方法分析
10-15
主要介绍了tp5框架前台无限极导航菜单类实现方法,结合实例形式分析了tp5框架前台无限极导航菜单类实现原理、步骤与操作注意事项,需要的朋友可以参考下
thinkphp5使用无限极分类
10-17
主要为大家详细介绍了thinkphp5使用无限极分类，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery无限极侧边下拉菜单代码
04-25
jQuery无限极侧边下拉菜单代码是一款利用json导入分类菜单数据，适用于后台框架的侧边导航菜单效果代码。
php 无限极分类
01-20
复制代码 代码如下:<...添加分类 catalog_add($uid,$name) //$uid 父id //$name 分类名 流程:依据$uid,在此id下添加一个新子id 删除分类 catalog_del($uid)//参数 $uid 数要删除的分类 修改分类 catalo
使用Python3.7+Django2.0.4配合vue.js2.0的组件递归来实现无限级分类(递归层级结构)
刘悦的技术博客
03-31 664
那么这种层级结构也成为树结构在日常的开发需求里也是很常见的，比如美多商城系统的商品分类，课程的目录章节，以及以及论坛里的帖子回复等等，本次我们后台利用Django来写一个能够返回层级结构数据的接口，接口将该数据以json的形式返回前端，前端使用vue的组件递归来展示数据。首先，打开django项目中的models.py，新建一个类别的模型类，这里我们以最简单的parentid的形式来建立。当然了，vue组件也可以间接的调用自己实现递归，这涉及到组件之间的循环引用，这样比较麻烦，可读性也间接的降低了不少。
CSS+js无限级折叠导航菜单
10-27
一个无限级分类的折叠导航菜单，大部分是用CSS实现，结合JavaScript技术，使这款菜单更加实用。压缩包内含有两上示例，一个横向菜单、一个竖向菜单，
js无限极分类
weixin_44194656的博客
04-24 924
以下贴下主要代码： var data = [ { css: "el-icon-document", group_node_order: 0, group_parent_id: 0, id: 1, link: "courseManger", menu_order: 1, text: "课程管理", type: "group_parent" }, {...
vue递归组件实现无限极分类菜单/无限极树状图，点击其中一项菜单关闭其它所有菜单项，vue递归组件通过数据定位当前组件层级及定位哪一条数据
12-31 1173
先看效果，测试案例，随便加了个css动画： 不知道使用 vue 递归组件注意事项的自行查看官方文档哈 【查看】 比较简单的一个 demo 仅供参考，其它复杂功能的话，能传值，能定位到具体数据了，什么功能做不了，是不是？？？ 准备数据 store.js： // store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { l
无限极分类在html怎么用,JavaScript+CSS无限极分类效果完整实现方法_javascript技巧...
weixin_39746652的博客
06-17 306
本文实例讲述了JavaScript+CSS无限极分类效果完整实现方法。分享给大家供大家参考，具体如下：CSS样式：a {text-decoration:none;}a,a:visited {color:#000;background:inherit;}body {margin:0;padding:20px;font:12px tahoma,宋体,sans-serif;}dt {font-size:...
js tree数据的无限极分类
小白前端
12-30 167
vue数据的无限极递归输结构
无限分类 查找子集与查找上级 节点
咳咳，请多指教
07-29 280
此方法 适用于多个表无限分类查找子集，限定是表结构一样，考虑性能 仅仅new 一个对象 /* * by:lwl * 无限极分类查找某个节点下的所有 子类 * model:模型类 例如:Cate::class * id:最高父类节点 * isSelf:true:数组返回自己，false:数组不返回自己 * data：返回数组 */ if (!function_exists('getAllNextId')) { function getAllNextId($model, $id, $i.
leetcode **124. 二叉树中的最大路径和（2020.6.21）
Sophia_fez的博客
06-21 207
【题目】**124. 二叉树中的最大路径和 给定一个非空二叉树，返回其最大路径和。 本题中，路径被定义为一条从树中任意节点出发，达到任意节点的序列。该路径至少包含一个节点，且不一定经过根节点。 示例 1: 输入: [1,2,3] 1 / \ 2 3 输出: 6 示例 2: 输入: [-10,9,20,null,null,15,7] -10 / \ 9 20 / \ 15 7 输出: 42 【解题思路1】递归 主要是两种
无限极分类的JS实现
weixin_30764137的博客
03-13 359
纯JS实现无限极分类 <!DOCTYPE html> <html> <head> <title></title>//引入Jquery <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">&lt...
JavaScript之扁平数组转换成JSON树形结构、无限极、push、children、forEach
“代码农”微信公众号
01-26 723
JavaScript之扁平数组转换成JSON树形结构、无限极、push、children、forEach
php 传引用无限极分类
最新发布
12-11
假设我们有一个无限极分类的数据结构，每个分类下面又可以有多个子分类，我们可以使用传引用的方法来处理这种数据结构。在PHP中，我们可以使用引用符号“&”来声明一个变量是一个引用。通过传递引用，我们可以直接在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值