新学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. C# Value type vs Reference type

    [MY NOTE]   [转载请注明出处] Reference Source: http://www.albahari.com/valuevsreftypes.aspx http://www.c-sh ...

  2. 栈和队列的java简单实现

    今天看了一本书<啊哈 算法>,书的内容不多,一共两章,第一章是常见的排序算法包括桶排序.冒泡排序和快速排序,这些事基础的排序算法网上有很多资料说明,这里主要说第二章栈,对列,链表,书上使用 ...

  3. （二）—Linux远程连接与常用命令

    要学linux ,一定得用命令界面的,怎么也得是shell语言,用就最难最原始的,用的人都是专家,历史最少也得30年,不管有三七二十一上来就敲ls ,先看看当前目录都有什么.一口专业的linux范儿, ...

  4. Android官方技术文档翻译——Gradle 插件用户指南（5）

    昨晚把第五章未译完的几句话攻克了.只是第六章没怎么译,明后天又是周末,假设周一前第六章翻译完的话,周一再发第六章. 本文译自Android官方技术文档<Gradle Plugin User Gu ...

  5. lufylegend练习（1）帧速率

    近期发现一个HTML开源游戏引擎,感觉还不错http://lufylegend.com/ 可是没有基础的同学.看起来费劲.所以打算边学边记笔记,说明都在凝视中 <!DOCTYPE html> ...

  6. JAVA入门[5]-初步搭建SpringMVC站点

    一.新建Module 1.新建Module,类型如下图所示: 2.为项目添加Spring框架支持,操作步骤如下: 首先在Module右键->Add Framework Support: 2.Sp ...

  7. Uva 01124, POJ 3062 Celebrity jeopardy

    It's hard to construct a problem that's so easy that everyone will get it, yet still difficult enoug ...

  8. shell 参数记录

    $0  执行脚本的名称 $* 和 $@ 所有参数 $#  参数个数 $_  上个命令的最后一个参数 $$  代表当前命令所在的pid $!  代表最后执行的 '后台' 命令的pid $? 代表上条命令 ...

  9. 自学Zabbix3.9.3-模板Templates-嵌套Nesting

    自学Zabbix3.9.3-模板Templates-嵌套Nesting 嵌套是一个模板包含一个或多个其他模板的方法.可以在一个"嵌套"模板中将一些模板链接在一起.嵌套的好处在于,只 ...

  10. Java并发编程有多难？这几个核心技术你掌握了吗？

    本文主要内容索引 1.Java线程 2.线程模型 3.Java线程池 4.Future(各种Future) 5.Fork/Join框架 6.volatile 7.CAS(原子操作) 8.AQS(并发同 ...