新学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# textbox的滚动条总是指向最底端

    当我第一次添加滚动条时候,我发现滚动条总是跑向上方,经过研究 解决方案如下: this.textBox1.Focus(); 获取焦点 this.textBox1.Select(this.textBox ...

  2. mac下出现xcrun: error导致git、svn无法使用的解决办法

    现象:xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun ...

  3. Maven快速指南

    Maven是Apache基金会提供的项目管理工具, 其采用项目对象模型(Project Object Model, POM)描述项目配置, 并使用生命周期模型管理构建过程中各种操作. POM mave ...

  4. Spring Cloud Zuul

    新建Spring Boot工程,命名为zuul 1.pom.xml添加依赖 <?xml version="1.0" encoding="UTF-8"?&g ...

  5. Sublime Text 3 常用快捷键

    一. 选择类       Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本.     Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子:快速选中并 ...

  6. Effective Java 第三版——1. 考虑使用静态工厂方法替代构造方法

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  7. vue项目的骨架及常用组件介绍

    vue项目基础结构 一个vue的项目,我觉得最小的子集其实就是{vue,vue-router,component},vue作为基础库,为我们提供双向绑定等功能.vue-router连接不同的" ...

  8. 自学Python3.2-函数分类

    函数的分类 内置函数,自定义函数,匿名函数 一.内置函数(python3.x) 内置参数详解官方文档: https://docs.python.org/3/library/functions.html ...

  9. iOS 页面之间的专长动画控制器间的转换

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 24.0px; font: 14.0px "Heiti SC Light" ...

  10. iOS UICollectionView(转一) XIB+纯代码创建：cell，头脚视图 cell间距

    之前用CollectionViewController只是皮毛,一些iOS从入门到精通的书上也是泛泛而谈.这几天好好的搞了搞苹果的开发文档上CollectionViewController的内容,亲身 ...