jquery 无限下拉菜单演示

最新推荐文章于 2024-08-15 08:55:57 发布
最新推荐文章于 2024-08-15 08:55:57 发布
阅读量65 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/sshnwl/p/3446830.html
版权 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"/></script>
<title>无限级下拉菜单</title>
<style type="text/css">
.hide{
display:none;  
    }
#nav {width:1000px; margin:0 auto; position:relative; background:#CCC;}
#nav ul{margin:0px; padding:0px; list-style:none; background:#666;}
#nav>ul{width:100%;}
.meau1{width:200px;display:inline-block;float:left;}
#nav>ul>li>ul{position:absolute;}
#content{width:1000px;margin:0 auto; clear:both;}
.meau3{padding-left:60px;}
 
</style>
<script language="javascript">
$(function(){
 
    $("li").hover(function(){
    $(this).children('.hide').show();
    },function(){
     
    $(this).children('.hide').hide();
         
    })
     
    })
 
</script>
</head>
 
<body>
 
<div id="nav">
 
<ul>
    <li class="meau1">
    <span>一级菜单</span>
        <ul class="hide">
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
        </ul>
    </li>
    <li class="meau1">
    <span>一级菜单</span>
        <ul class="hide">
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
        </ul>
    </li>
    <li class="meau1">
    <span>一级菜单</span>
        <ul class="hide">
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
        </ul>
    </li>
    <li class="meau1">
    <span>一级菜单</span>
        <ul class="hide">
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
        </ul>
    </li>
    <li class="meau1">
    <span>一级菜单</span>
        <ul class="hide">
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
            <li class="meau2">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="meau3">
                    <span>三级菜单</span>
                    </li>
                 
                </ul>
            </li>
        </ul>
    </li>
 
</ul>
 
 
</div>
<div id="content">这里还有元素</div>
 
 
</body>
</html>

如果想用一句javascript实现更多功能的话，html树写规范对它有很大的影响。

转载于:https://www.cnblogs.com/sshnwl/p/3446830.html

baisha0363640
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery下拉菜单的实现
北野的博客
09-09 375
实现效果 html代码 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>下拉菜单</title> <script src="/hello
jQuery实现特殊下拉菜单
Gyoung杨广
01-08 335
jQuery实现特殊下拉菜单
jQuery实现下拉菜单[代码+详细讲解+效果图]
热门推荐
心态的博客
05-09 1万+
jQuery实现下拉菜单[代码+详细讲解+效果图] 非常的高效。
跟十八哥学php之—无限级联动下拉菜单,jquery无限级联下拉菜单简单实例演示
weixin_42300211的博客
03-22 259
本文实例讲述了jquery无限级联下拉菜单代码以及jquery无限级联下拉菜单实现思路。分享给大家供大家参考。具体如下：最终效果图：因为是级联，所以数据必须是树型结构的，这里的测试数据如下：看下效果图：1、效果图一：2、效果图二：3、效果图三：由图可知，下拉框的个数并不是写死的，而是动态加载的。每当下拉框选择改变的时候，会发送一次ajax请求，请求成功返回json格式数据，当返回的数据不为空时(即...
php jquery 级联菜单,jquery无限级联下拉菜单简单实例演示_jquery
weixin_39581964的博客
03-11 128
本文实例讲述了jquery无限级联下拉菜单代码以及jquery无限级联下拉菜单实现思路。分享给大家供大家参考。具体如下：最终效果图：因为是级联，所以数据必须是树型结构的，这里的测试数据如下：看下效果图：1、效果图一：2、效果图二：3、效果图三：由图可知，下拉框的个数并不是写死的，而是动态加载的。每当下拉框选择改变的时候，会发送一次ajax请求，请求成功返回json格式数据，当返回的数据不为空时(即...
jquery无限级联下拉菜单简单实例演示
11-23
在本文中，我们将深入探讨如何使用jQuery实现一个无限级联的下拉菜单。这个功能对于构建具有层次结构数据的Web应用程序非常有用，例如在组织结构、地区选择或产品分类等场景。下面，我们将分析实现这一功能的关键点...
jQuery ul标签下拉菜单演示代码
10-28
本文将结合上述提供的内容，详细介绍如何利用jQuery实现一个ul标签下的动态下拉菜单效果。 首先，HTML结构是创建下拉菜单的基础。从给定内容中可以看出，下拉菜单是由一个div元素作为容器，其中包含多个嵌套的ul和...
jQuery搜索框下拉菜单选择插件
06-10
**jQuery搜索框下拉菜单选择插件**是一种增强用户交互体验的前端开发工具，它将传统的输入框与下拉菜单相结合，提供了丰富的筛选和选择功能。这种插件在网页表单设计中尤其常见，用于提高数据输入的效率和准确性。在...
ECMAScript性能优化技巧与陷阱：深入探索与实践
最新发布
Chujun123528的博客
08-15 636
ECMAScript性能优化是一个复杂而细致的过程，需要开发者从多个角度进行考虑和优化。通过合理利用现代JavaScript特性、优化DOM操作、选择合适的算法和数据结构、利用Web Workers等技术手段，可以显著提升JavaScript代码的执行效率。同时，开发者还需要关注全局变量、闭包、eval等性能陷阱，避免不必要的性能开销。此外，性能监控与分析、内存管理、网络层面的优化等也是不可忽视的重要方面。只有综合考虑这些因素，并持续进行性能优化工作，才能为用户提供更加流畅、高效的Web应用体验。
vue3使用pnpm运行项目但是运行不起来
一个努力不被优化的程序员
08-12 181
重新创建项目，将老项目的package.json，vite.config.ts，src等文件拖拽替换。删除node_modules重新下：文字编译乱码，utf-8可能解析处理问题。（如果哪位知道为什么会这样或者怎么解决麻烦留言下）运行项目的时候发现根本运行不起来了。删除node_modules重新下。尝试过创建.npmr文件。创建.npmr：不管用。
提升前端性能的JavaScript技巧
han2434的博客
08-14 699
一个快速响应、高效运行的Web页面不仅能提升用户体验，还能在一定程度上影响网站的SEO排名。本文汇总了一系列JavaScript技巧，以帮助开发者提升前端性能，并提供实际的代码示例。
Electron学习与总结
song854601134的博客
08-12 207
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
display:flex布局，最简单的案例
有问题可关注公众号：前端研究院 后台输入问题回复
08-12 144
【代码】display:flex布局，最简单的案例。
vue 3d echarts scatter3D元素塌陷，图标塌陷进地图完美解决方案
creatlh的博客
08-12 168
当我们手机用 scatter3D 类型时，最小值因为渲染问题会塌陷进模型里面，所以只要让value固定，再将label formatter 配合 boxHeight属性即可解决，（代码附带自定义label图标解决办法）
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 906
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
Vue2 axios
qq_53374893的博客
08-14 90
说明一下， 当前服务器 有资源 就不会走代理服务器了，直接返回当前资源 而且只能代理一个服务器.
playwright链接本地浏览器，实现自动登录。
qq_38880880的博客
08-12 153
【代码】playwright链接本地浏览器，实现自动登录。
【无标题】
weixin_42348009的博客
08-14 116
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
Vue中的路由与多种守卫常见问题及解决方案
zhaochen1127的博客
08-12 1098
Vue Router中的路由守卫主要分为三种类型：全局守卫、路由独享守卫和组件内守卫。全局守卫：作用于整个应用，包括beforeEach和afterEach。路由独享守卫：在路由配置中直接定义，只有进入该路由时才会触发，如。组件内守卫：定义在组件内部，包括和。路由守卫是Vue Router中一个强大的功能，能够帮助开发者在路由跳转前后执行重要的逻辑判断。然而，不当的使用和配置可能会引发一系列问题，如无限循环、守卫逻辑错误、守卫未正确触发以及异步处理不当等。
jquery ajax下拉菜单
06-03
下面是一个简单的例子，演示如何使用 jQuery AJAX 加载下拉菜单选项： HTML 代码： ```html 选择国家： <select name="country" id="country"></select> ``` JavaScript 代码： ```javascript $(document).ready...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值