jquery 无限折叠菜单面板

最新推荐文章于 2019-05-30 16:26:33 发布
最新推荐文章于 2019-05-30 16:26:33 发布
阅读量238 收藏
点赞数
分类专栏： HTML Javascript CSS 文章标签： 折叠菜单 折叠面板
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yu286445866/article/details/72722478
版权
HTML 同时被 3 个专栏收录
1 篇文章 0 订阅
订阅专栏
Javascript
1 篇文章 0 订阅
订阅专栏
CSS
1 篇文章 0 订阅
订阅专栏

jquery 无限折叠菜单面板，项目需要就自己写了个无限级的折叠面板，如有BUG欢迎留言。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>无限折叠</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <style type="text/css">
        html,body { margin: 0; padding:0; }
        ul, li { padding: 0; margin: 0; list-style: none;}
        .nav { width: 300px; margin:0 auto; }
        .navList {}
        .navList ul {display: none;}
        .navList li {border-bottom:1px solid #eee; position: relative;}
        .navList li a { background: #f60; color: #eee; display: block; padding:5px;}
        .navList li ul { margin-left: 20px;}
        .navList li ul li a { background: #fff; color: #666;}
    </style>
    
</head>
<body>
    <div class="nav">
        <ul class="navList">
            <li>
                <a href="" class="togglea">一级菜单 ></a>
                <ul>
                    <li><a class="togglea">菜单列表</a></li>
                    <li><a class="togglea">菜单列表</a></li>
                    <li><a class="togglea">菜单列表</a></li>
                </ul>
            </li>
            <li>
                <a href="" class="togglea">一级菜单 ></a>
                <ul>
                    <li><a class="togglea">菜单列表</a></li>
                    <li><a class="togglea">菜单列表</a></li>
                    <li><a class="togglea">菜单列表</a></li>
                </ul>
            </li>
            <li>
                <a href="" class="togglea">一级菜单 ></a>
                <ul>
                    <li>
                        <a href="" class="togglea">二菜单 ></a>
                        <ul>
                            <li><a class="togglea">菜单列表</a></li>
                            <li><a class="togglea">菜单列表</a></li>
                            <li><a class="togglea">菜单列表</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="" class="togglea">二菜单 ></a>
                        <ul>
                            <li><a>菜单列表</a></li>
                            <li><a>菜单列表</a></li>
                            <li><a>菜单列表</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="" class="togglea">二菜单 ></a>
                        <ul>
                            <li><a>菜单列表</a></li>
                            <li><a>菜单列表</a></li>
                            <li><a>菜单列表</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="" class="togglea">一级菜单 ></a>
                <ul>
                    <li>
                        <a href="" class="togglea">二菜单 ></a>
                        <ul>
                            <li>
                                <a href="" class="togglea">三级菜单 ></a>
                                <ul>
                                    <li>
                                        <a href="" class="togglea">四级菜单 ></a>
                                        <ul>
                                            <li><a>菜单列表</a></li>
                                            <li><a>菜单列表</a></li>
                                            <li><a>菜单列表</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="" class="togglea">三级菜单 ></a>
                                <ul>
                                    <li>菜单列表</li>
                                    <li>菜单列表</li>
                                    <li>菜单列表</li>
                                </ul>
                            </li>
                            <li><a href="" class="togglea">三级菜单</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="" class="togglea">二菜单 ></a>
                        <ul>
                            <li>菜单列表</li>
                            <li>菜单列表</li>
                            <li>菜单列表</li>
                        </ul>
                    </li>
                    <li>
                        <a href="" class="togglea">二菜单 ></a>
                        <ul>
                            <li>菜单列表</li>
                            <li>菜单列表</li>
                            <li>菜单列表</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    
<script type="text/javascript">
    $(document).ready(function(){
      $(".navList .togglea").on('click',function(){
            
            if($(this).parent().hasClass('active')){
                $(this).next('ul').slideUp(400);
                $(this).parent().removeClass('active');
                $(this).parent().siblings().removeClass('active');
                return false;
            }else{
                $(this).parent().addClass('active');
                $(this).next('ul').slideDown(400);
                $(this).parent().siblings().removeClass('active');
                $(this).parent().siblings().find('ul').slideUp(400);
                $(this).parent().siblings().find('li').removeClass('active');
            }
            
        return false;
      });
    });
</script>
    
</body>
</html>


上善V若水
关注
专栏目录
4.easyui+ztree案例：西部区域折叠面板的使用
您已进入防沉迷系统...
11-21 2555
使用的是accordion控件。(可折叠面板) 例如给西部区域添加折叠面板： 西部 菜单一 菜单二 当前效果： 可以发现，现在的折叠面板只在上面的一小部分内折叠，我们点击一个面板的时候，想让他在整个区域内活动。 想要达到这个效果，需要设置panel的fit属性，因为accordion
jQuery左菜单无限折叠
01-28
一款基于jQuery的左菜单无限折叠，兼容各浏览器
js无限级折叠菜单精简版
10-28
一个简单的js无限级折叠菜单，这里只列出JS版本的，JQUERY版本的可以到作者发的帖子上看，权当抛砖引玉了。
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
10-23
主要介绍了JS实现无限级网页折叠菜单(类似树形菜单)效果代码,涉及JavaScript基于鼠标事件实现针对页面元素结点的遍历及样式操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
Accordion：可折叠面板的集合
weixin_33742618的博客
10-26 151
功能：          实现了QQ、Msn好友分类的折叠效果，就像包含了多个CollapsiblePanels 。 常用属性：       SelectedIndex ： 该控件初次加载时展开的AccordionPane面板的索引值 。       HeaderCssClass ： 该Accordion中包含的所有AccordionPane面板的标题区域所应用的CSS Class 。 ...
jQuery实现的简单折叠菜单(折叠面板)效果代码
10-23
本文介绍了一种基于jQuery实现的简单折叠菜单（也称为折叠面板）的代码实现。通过使用jQuery库中的`slideToggle`和`toggleClass`方法，可以实现一个简洁的折叠效果，允许用户在需要时展开或折叠内容。 #### jQuery...
基于jQuery实现以手风琴方式展开和折叠导航菜单
10-22
总结来说，这个jQuery实现的手风琴导航菜单通过监听点击事件，实现了菜单项的动态展开与折叠，同时通过动画效果增强了用户体验。这样的设计既保持了页面的整洁，又提供了直观的交互，是网页设计中一个实用的技巧。...
JSON无限折叠菜单编写实例
10-26
JSON无限折叠菜单是一种常见的网页交互元素，用于呈现层次结构的数据，如网站导航菜单或复杂的分类系统。这种菜单允许用户逐级展开子菜单，探索更深层次的内容。在本实例中，我们将探讨如何使用JSON数据和JavaScript...
jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法
10-21
在本篇文章中，我们将专注于解决使用 jQuery EasyUI 创建的可折叠面板（Accordion）在动态加载内容时没有效果的问题。 首先，我们需要了解 jQuery EasyUI 的 Accordion 组件。Accordion 是一种可以折叠和展开多个...
jquery实现无限级别的多级菜单(自己封装的插件)
hhy1006894859的博客
12-10 2558
demo的下载地址：https://download.csdn.net/download/hhy1006894859/10845124 js代码如下： var list = [ { "menuName": "项目管理", "level":1, "childTree": [{ "menuName": "项目进度&qu
使用jQuery创建折叠式菜单（手风琴效果）
热门推荐
hanhf的专栏
07-18 1万+
使用jQuery创建折叠式菜单（手风琴效果） 　　今天给大家介绍如何使用jQuery创建折叠式菜单，即通常所说的手风琴效果（accordion [əˈkɔ:rdiən]）。 　　实现效果如下： 一、HTML代码结构 　　要实现折叠式菜单，代码相当简单，如下所示： &lt;ul class="accordion"&gt; &lt;li class="selec...
Jq实现重叠效果-实现无限级分类树形中js 的折叠效果
...
08-04 3859
案例： 代码实现： 首先，在静态页面导入jq包； 然后，代码实现如下： //获取当前的 a 标签 $('a.zd').click(function(){ //找到当前所在的tr var tr = $(this).parent().parent(); //获取当前的级别level
jquery实现内容的折叠与展开
Mr.yang
04-01 1万+
一描述 1.内容多的时候是折叠的效果，如图 2.点击更多按钮，内容文字展开，效果如图 二代码实现 1.html代码 js文本段落展开和收拢效果 这一段文字是可以折叠展开的，点击下面的“更多”就可以展开，点击下面的“折叠”就可以折叠 2.js代码，最关键的 $(fun
javascript入门 之 ztree (六 结点的点击和展开/折叠事件)
愿你饱经冷暖，仍保纯真
08-10 3188
1.注意： 测试点击事件时，如果要测试取消选中和追加选中，如果按住ctrl和win键无用，则需要先用鼠标左键按住,然后，在松开左键的前几毫秒按住ctrl键便可！ &lt;!DOCTYPE html&gt; &lt;script src="bower_components/ztree/js/jquery.ztree.excheck-3.5.js"&gt;&lt;/script&gt; &lt;H...
（八）easyUI之Accordion折叠面板：动态面板
weixin_33924220的博客
10-26 239
二、动态面板 数据库设计 函数设计：该函数用于获取某个节点的所有子节点 CREATE FUNCTION fn_getAddress_ChildList_test(rootId INT) RETURNS varchar(1000) CHARSET utf8 #rootId为你要查询的节点 BEGIN #声明两个临时变量 DECLARE temp VARCHAR(1000)...
jquery 实现折叠菜单的效果
weixin_43854764的博客
05-30 819
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="jquery-3.4.1.min.js"></script> <script type="text/javasc...
13zTree - 展开 / 折叠父节点控制
阿甘兄
04-22 1587
完整代码： <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeExpand / onExpand && beforeCollapse / onCollapse</TITLE> <meta http-equiv="content-type" cont...
JSON 无限折叠菜单
梦和远方的博客
01-12 1496
最近看了一篇关于JSON无限折叠菜单的文章 感觉写的不错，也研究了下代码，自己也实际应用到公司项目里了，很实用，推荐一下. 推荐地址：http://www.cnblogs.com/tugenhua0707/p/3474791.html 可根据自己想要的样式以及效果自定义更改。 js代码： /** * JSON无限折叠菜单 * @constructor {AccordionMenu} *...
jQuery Mobile 面板详解与示例
jQuery Mobile 的面板是这个框架中一个重要的组件，它允许开发者创建可滑动的侧边栏，常用于导航菜单或者附加信息展示。要创建一个面板，你需要在HTML文档中添加一个带有 `data-role="panel"` 属性的`<div>`元素，并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值