新学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. CCS模块库文件的生成与使用

    在一个大的项目中,为了便于管理,有时需要将一个模块封装为库文件,并可以在项目中使用. 图表 1 项目 步骤如下: 1.右键-->new-->CCS Project 图表 2 新建ccs p ...

  2. WinForm下的loading框实现

    前言:在项目使用C/S模式情况下,由于需要经常进行数据的刷新,如果直接进行刷新,会有一个等待控件重画的过程,非常的不友好,因此在这里添加一个loading框进行等待显示. 实现:在经过多方面查询资料, ...

  3. flask-login使用笔记

    看外国文献的中文翻译  翻译的程度有的让人会疯,翻译最好的状态是异译 直译会显的很生硬 看起来确实难过:所以在看的时候,建议都看外国文献吧,或者自己用谷歌翻译,感觉比一些翻译的博客准多了: 在使用fl ...

  4. Codeforces 830C On the Bench

    题意:给你n个数,问有多少种排列方式使得任意两个相邻的数的乘积都不是完全平方数 我好弱,被组合和数论吊着打... 首先我们可以把每个数中固有的完全平方数给分离出来,那么答案其实就只与处理后的序列相关. ...

  5. MySQL系列：基于binlog的增量订阅与消费（一）

    在一些业务场景中,像在数据分析中我们有时候需要捕获数据变化(CDC):在数据审计中,我们也往往需要知道数据从这个点到另一个点的变化:同样在实时分析中,我们有时候需要看到某个值得实时变化等. 要解决以上 ...

  6. android应用集成google登录

        集成google登录之前需要有一下三点要求,只有具备一下两点要求才能集成google登录:         1,android 运行版本4.0及更新版本         2,android 设 ...

  7. 1.python的安装

    1.python 安装实验所用为系统自带,退出为exit() 或ctrl +D命令 2.一般装pyhton2.7 ,3.5的版本有更多特效.不用在版本上太多纠结.python官网https://www ...

  8. 【SqlServer】【问题收集】必须声明标量变量

    1   问题概述 在DAL层,通过标量给变量赋值时,出现如下异常 我们来看看在数据访问层的SQL语句: //根据EmployeeName条件获取数据 public DataTable GetEmplo ...

  9. 源生js惯性滚动与回弹效果

    在写移动端的APP或者页面时,经常会遇到惯性滚动与回弹效果.用插件iscroll可以轻松解决这个问题,大多数的移动框架也能轻松解决这个问题,它们内部都封装了这个效果. 一直好奇这个效果原生JS是怎么实 ...

  10. Django的Form(二)

    上一篇已经简单介绍了Django的Form,现在开始进阶操作了 ..... 创建Form类的时候,主要涉及到Form字段和Form的插件,字段用于做form验证,插件用来生成HTML DjiangoF ...