jquery三级折叠菜单

最新推荐文章于 2023-01-04 14:05:21 发布
最新推荐文章于 2023-01-04 14:05:21 发布
阅读量185 收藏 1
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/afuge/archive/2012/09/11/2680168.html
版权

jquery三级折叠菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jqyery+CSS折叠、合拢的多级菜单</title>

<style type="text/css">
*,body,ul,li,h1,h2{ margin:0; padding:0; list-style:none;} 
body{font:12px "宋体";} 
.tree_box{margin: 5px 0;width: 100px;overflow: hidden;}
.tree_box h3,.tree_one h4,.tree_two li{cursor: pointer;}
.tree_one,.tree_two{display: none;margin: 0 0 0 10px;overflow: hidden;}
.tree_one li{margin: 5px 0;}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>

<body>
<div class="tree">
    <div class="tree_box">
        <h3>
            我是一级菜单
        </h3>
        <ul class="tree_one" style="display: block;">
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="tree_box">
        <h3>
            我是一级菜单
        </h3>
        <ul class="tree_one">
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="tree_box">
        <h3>
            我是一级菜单
        </h3>
        <ul class="tree_one">
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
            <li>
                <h4>
                    我是二级菜单
                </h4>
                <ul class="tree_two">
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                    <li>
                        我是三级菜单
                    <li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        var h3 = $(".tree_box").find("h3");
        var tree_one = $(".tree_box").find(".tree_one");
        var h4 = $(".tree_one").find("h4");
        var tree_two = $(".tree_one").find(".tree_two");
        h3.each(function(i){
            $(this).click(function(){
                tree_one.eq(i).slideToggle();
                tree_one.eq(i).parent().siblings().find(".tree_one").slideUp();
            })
        })
        h4.each(function(i){
            $(this).click(function(){
                tree_two.eq(i).slideToggle();
                tree_two.eq(i).parent().siblings().find(".tree_two").slideUp();
            })
        })
    })
</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/afuge/archive/2012/09/11/2680168.html

孙瑞宇
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery 实现三级菜单
weixin_46390620的博客
03-09 1121
三级菜单 效果图： 文中所用图片如下： 基本代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>三级菜单</title> </head> <script src="https://cdn.bootcss.c...
jquery实现二级菜单
朱朱家园
02-22 1479
一种实现： 二级菜单在一级菜单中，采用JQuery实现 衬衫 短袖衬衫 长袖衬衫 短袖T恤 长袖T恤
Jquery三级折叠菜单示例
03-18
Jquery实现三级折叠，菜单。
jquery实现三级下拉菜单(三种方法) 折叠菜单
sinat_51673411的博客
03-02 1765
<!doctype html> <html> <head> <meta charset="utf-8"> <title>折叠菜单</title> <style type="text/css"> ul, li { margin: 0; padding: 0 } body {
帮我写一个jq三级可折叠点击的三级菜单
weixin_35756624的博客
01-04 117
好的，下面是一个使用 jQuery 实现的可折叠三级菜单的示例代码： <style> .submenu { display: none; } </style> <script> $(document).ready(function() { $(".menu-item").click(function() { $(this...
JS+CSS打造三级折叠菜单，自动收缩其它级 js
diaozhuochuan9223的博客
10-16 174
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS+CSS打造三级折叠菜单，自动收缩其它级</title> &lt...
JQuery实现折叠菜单。三个版本，写法。
m0_53881313的博客
05-25 5079
效果如图所示： 点击后展开菜单。同等高度，上面是因为截图原因。 代码如下： 版本1：练习用选择器写样式。代码很丑，后面有好看的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo.
JQuery实现折叠式菜单的详细代码
10-15
2. 添加多级子菜单：通过嵌套的`<ul>`结构，可以创建多级折叠菜单。 3. 使用CSS样式增强视觉效果：通过调整CSS样式，可以改变菜单的颜色、字体、边框等，使其与网站设计更协调。 4. 添加事件防止冒泡：如果需要防止...
jQuery三级树状菜单代码.zip
最新发布
09-23
《jQuery三级树状菜单代码详解及应用》 在网页开发中，树状菜单是一种常见的交互元素，它能够清晰地展示层级关系，使用户更方便地浏览和操作数据。本篇文章将详细解析“jQuery三级树状菜单代码”的实现原理，并探讨...
jQuery三级滑动菜单
11-17
本项目是“jQuery三级滑动菜单”，旨在利用JavaScript库jQuery创建一个灵活、易定制的多级导航菜单。下面将详细讲解这个项目的实现原理及关键知识点。 一、jQuery库的引入与基本使用 jQuery是一个轻量级的...
jQuery多级折叠菜单
06-13
jQuery多级折叠菜单，有例子
jquery三级下拉折叠手风琴菜单导航效果
04-19
NULL 博文链接：https://panyongzheng.iteye.com/blog/1853490
jQuery多级树形分类折叠菜单.zip
05-24
jQuery多级树形分类折叠菜单基于jquery-1.7.2.min.js制作，json树形菜单。
绝不可错过的一款jQuery四级滑出菜单【荐】
05-12
内容索引:脚本资源,jQuery,滑动菜单,四级菜单　　绝不可错过的一款jQuery四级滑出菜单【荐】，不但设计得漂亮诱人，而且还有动感的效果，更何况支持4级子菜单，这完全可以适合大多数网站的需要，同时也可借机好好研究一下jQuery，何乐而不为呢？
jQuery+CSS 可折叠的多级自动伸缩菜单
05-12
内容索引:脚本资源,CSS特效,折叠菜单,动感菜单　　jQuery+CSS 完成超酷的动感菜单，默认状态是折叠的，点击后开始动画展开，可以支持三级，黑色超酷风格，相信不少朋友会喜欢这种样式的，不过有一点不好就是，菜单项是写在JS里面的，这对以后扩展菜单有一定麻烦，不容易受程序控制，需要手动增删，多少有些不便。
漂亮的jquery三级下拉菜单
03-09
总结，创建漂亮的jQuery三级下拉菜单涉及HTML结构设计、CSS样式定义以及jQuery交互脚本编写。通过熟练掌握这些技能，你可以构建出既实用又美观的网页导航，提升用户体验。在实际项目中，可以根据具体需求进行定制和...
JS三级可折叠菜单实现方法
ericer666的博客
03-01 1098
这篇文章主要介绍了JS三级可折叠菜单实现方法,以实例形式分析了asp.net结合JavaScript实现三级折叠菜单的相关技巧,涉及JavaScript节点操作实现方法,需要的朋友可以参考下 本文实例讲述了JS三级可折叠菜单实现方法。分享给大家供大家参考，具体如下： .ASPX代码： "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition
使用jQuery创建折叠式菜单（手风琴效果）
热门推荐
hanhf的专栏
07-18 1万+
使用jQuery创建折叠式菜单（手风琴效果） 　　今天给大家介绍如何使用jQuery创建折叠式菜单，即通常所说的手风琴效果（accordion [əˈkɔ:rdiən]）。 　　实现效果如下： 一、HTML代码结构 　　要实现折叠式菜单，代码相当简单，如下所示： &lt;ul class="accordion"&gt; &lt;li class="selec...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值