新学jQuery还有很多没学，今天做了个下拉菜单，按照自己的思想结合学的基础效果实现一款可以任意添加层数的下拉菜单，如果有什么建议，欢迎指教啦啦啦

我喜欢备注细一些，这样给自己也是一种理解和方便回顾哈哈

 <!DOCTYPE html>
 <html>
 <head>
 <style type="text/css">
     .menu-li-style{border:1px solid #B40607;}//第一层设置属性方便区分
     #menu li ul{border:1px solid #707F8C; display: none;}//第一层以后的设置属性

 </style>
 <link rel="stylesheet" type="text/css" href="../reset_css.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
 <script type="text/javascript">
     $(document).ready(function(){
         $("#menu li").hover(//第一层再li标签里面
             function(){//鼠标悬浮时的状态 //以后的每一层都是把一整个UL看成一整个块，已经再CSS里面设置隐藏属性值，当鼠标悬浮于第一层的时候就显示被隐藏的子UL然后一层一层的推理下去。
                 $(this).children('ul').slideDown(1000).show(1000);
             },
             function(){//鼠标离开的状态//鼠标悬浮离开后自动恢复原来的状态，秒速自己定啊
                 $('ul',this).slideUp(1000);
             }
         );
     });
 </script>

 </head>
 <body>
 <ul id="menu">
     <li class="menu-li-style">menu_1
         <ul>
             <li>menu_1_1
                 <ul>
                     <li>menu_1_1_1
                         <ul>
                             <li>menu_1_1_1_1</li>
                             <li>menu_1_1_1_2</li>
                         </ul>
                     </li>
                     <li>menu_1_1_2</li>
                 </ul>
             </li>
             <li>menu_1_2</li>
             <li>menu_1_3</li>
         </ul>
     </li>
     <li class="menu-li-style">menu_2
     </li>
 </ul>
 </body>
 </html>

效果图 CSS样式可以自己美化哦，我就做个效果啦。

jQuery 实现无限任意添加下拉菜单的更多相关文章

  1. jQuery插件：模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

  2. jQuery实现一个淡入淡出下拉菜单 非常简易

    前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...

  3. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

  4. [jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项，若有重置再提示

    今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容 页面HTML代码 <ul class="list-group xj-list-NObor xj- ...

  5. jQuery实现多级手风琴树形下拉菜单（源码）

    前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴 ...

  6. JQuery -&gt; 超级简单的下拉菜单

    使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...

  7. Excel添加下拉菜单

    一.选中需要下拉菜单的单元格 二.数据--数据校验 三 .选择序列,填写来源 四.保存

  8. 实例：用jQuery实现垂直和水平下拉 菜单

    主要是利用jQuery来实现垂直菜单和水平菜单.实现效果如图: 第一步,创建一个HTML文件,如图,包含两个ul.当然把jquery库也引入进去了. <!DOCTYPE html> < ...

  9. 用jquery制作一个二级导航下拉菜单

    1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素.       3通过使用show()方法来显示HTML元素.       4通过 ...

随机推荐

  1. python 正则表达式之零宽断言

    零宽断言:用于查找特定内容之前或之后的内容,但并不包括特定内容本身.对于零宽断言来说,我认为最重要的一个概念是位置,零宽断言用于指定一个位置,这个位置应该满足一定的条件(它附近满足什么表达式),并且这 ...

  2. 大数据：Hadoop入门

    大数据:Hadoop入门 一:什么是大数据 什么是大数据: (1.)大数据是指在一定时间内无法用常规软件对其内容进行抓取,管理和处理的数据集合,简而言之就是数据量非常大,大到无法用常规工具进行处理,如 ...

  3. OR1200中指令Cache的结构

    下面内容摘自<步步惊芯--软核处理器内部设计分析>一书 12.3 ICache结构 OR1200中实现ICache的文件有or1200_ic_top.v.or1200_ic_fsm.v.o ...

  4. 《C程序猿从校园到职场》勘误

    (本人正在參加2015博客之星评选.诚邀你来投票,谢谢:username=zhouzxi">http://vote.blog.csdn.net/blogstar2015/candida ...

  5. OSX: Scripts,让BootCamp在不论什么Mac上支持生成Windows7的USB安装盘

    为什么要做这个呢,由于BootCamp仅仅有在默认的Mac上才会有生成USB安装盘的选项.这个脚本就是为了确保用户使用它在不论什么一个Mac机器上都能够生成Windows的USB安装盘.当然了,假设你 ...

  6. mysql主从备份及常见问题处理

    1.mysql主从备份基本原理 mysql支持单向.异步复制,复制过程中一个服务器充当主服务器,而一个或多个其它服务器充当从服务器.mysql复制基于主服务器在二进制日志中跟踪所有对数据库的更改(更新 ...

  7. 由一道bash jail题引出的琐事@_@

    关键词:Terminal devices.shell.stdio 题目入口: (需要注册) root@kali:~# ssh level1@24.37.41.154 -p 1016 level1@24 ...

  8. 青否云 - 小程序待办事项 wxapp开源系统

    青否云最新开源系统:小程序待办事项 wxapp-demo 青否云 小程序 demo 下载地址:https://github.com/qingful/wxapp-demo 官网 http://cloud ...

  9. spring boot项目如何测试，如何部署

    有很多网友会时不时的问我,spring boot项目如何测试,如何部署,在生产中有什么好的部署方案吗?这篇文章就来介绍一下spring boot 如何开发.调试.打包到最后的投产上线. 开发阶段 单元 ...

  10. JAVA IO分析三：IO总结&文件分割与合并实例

    时间飞逝,马上就要到2018年了,今天我们将要学习的是IO流学习的最后一节,即总结回顾前面所学,并学习一个案例用于前面所学的实际操作,下面我们就开始本节的学习: 一.原理与概念 一.概念流:流动 .流 ...