新学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. UWP 判断系统版本

    public class VersionsHelper { , ); , ); , ); , ); , ); }

  2. 开源：Sagit.Framework For IOS 开发框架

    一:创造Sagit开发框架的起因: 记得IT连创业刚进行时,招了个IOS的女生做开发,然后: ----------女生的事故就此开始了----------- 1:面试时候:有作品,态度也不错,感觉应该 ...

  3. PPPOE拨号上网流程及密码窃取具体实现

    楼主学生党一枚,最近研究netkeeper有些许心得. 关于netkeeper是调用windows的rasdial来进行上网的东西,网上已经有一大堆,我就不赘述了. 本文主要讲解rasdial的部分核 ...

  4. Golang 探索对Goroutine的控制方法

    前言 在golang中,只需要在函数调用前加上关键字go即可创建一个并发任务单元,而这个新建的任务会被放入队列中,等待调度器安排.相比系统的MB级别线程栈,goroutine的自定义栈只有2KB,这使 ...

  5. 再学习之Spring(面向切面编程)

    一.概念 1.理论 把横切关注点和业务逻辑相分离是面向切面编程所要解决的问题.如果要重用通用功能的话,最常见的面向对象技术是继承(inheritance)或 组成(delegation).但是,如果在 ...

  6. dom4j配置文件

    # 我们必须实例化 ConsoleAppender # 01.实例化对象 ConsoleAppender console =new ConsoleAppender(); # log4j.appende ...

  7. 表单的自动到json与urlstr

    将表单序列化成json,将json转换成字符串 //将表单序列化成json 字符串 $.fn.serializeObject = function(){ var obj = {}; var count ...

  8. 第二十六天 蛰伏的Hibernate遇到春日的暖阳 —Spring MVC 集成Hibernate使用（一）

    6月7日.晴."纷纷红紫已成尘,布谷声中夏令新. 夹路桑麻行不尽.始知身是太平人. "        Hibernate和Spring的香艳相逢,不仅是Bean和Bean之间电光火 ...

  9. 入门vue----（vue的安装）

    1.安装node.js 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –registry=https://registry.npm ...

  10. (转）Maven依赖的jar包下载不了、jar更新不了的解决办法

    场景一: 使用Maven的同学可能偶尔会遇到这种情况:pom.xml中依赖了项目需要的某个jar文件,但是使用Maven –> update project 还是没办法下载该jar到项目中,你可 ...