这个效果很好看,Jq很容易实现:

    $(document).ready(function(){

        $('.menu li').hover(function(){

              $(this).children('ul').show();

              $(this).focus().addClass('focusa')    

          },function(){

              $(this).children('ul').hide();

              $(this).focus().removeClass('focusa')    

        });

    });

当   hover ,执行 函数 来show , 当移出 ,执行函数 来hide。 同时这里用到了链式操作

 $('').hover(function(){},function(){});

附上html参考,我删减了部分
<div class="container">
<ul class="menu">
<li><a href="#">菜单一</a>
<ul class="one">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#" class="more">菜单五</a>
<ul class="two">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#" class="more">菜单五</a>
<ul class="hdw">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#" class="more">菜单五</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜单二</a>
<ul class="one">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#" class="more">菜单三</a>
<ul class="two">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜单三</a></li>
</ul>
</div>

难的是样式

Jq写个联级菜单的更多相关文章

  1. 用js实现图片连播和联级菜单的实现

    <!DOCTYPE html> <html> <head> <title>图片轮播</title> <style> div{ b ...

  2. JQ写简单的伸缩菜单(内附效果图和源代码)

    效果如图: JQ代码就那么几句, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  3. 省市联级菜单--js+html

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  4. 自写JQ控件-树状菜单控件[demo下载]

    一个多月没有写博客了,最近也弄一个基于JQ的树状菜单控件,在此分享给大家.另外呢,通过这个例子分享一下怎么写JQ控件的. 事实上工作中,也是经常遇到的,有些时候自己想实现一些前端效果,用网上一些插件吧 ...

  5. FreeSql 导航属性的联级保存功能

    写在前面 FreeSql 一个款 .net 平台下支持 .net framework 4.5+..net core 2.1+ 的开源 ORM.单元测试超过3100+,正在不断吸引新的开发者,生命不息开 ...

  6. vue 自定义侧边栏 递归无限子级菜单

    有很多网站会涉及到导航栏,我自己在开发中用的是element导航组件,并且自定义事件,给大家分享一下. 1.使用递归方法,无限循环子级菜单. 2.使用组件封装,维护方便. 3.使用index作为路由跳 ...

  7. Axure案例:用中继器实现便捷好用的3级菜单--转载

    提示1:本篇教程可能不太适合新手,以及不了解中继器.全局变量.系统变量等使用的…新手 提示2:文字其实不多,截图太多,所以看上去很长,也可直接翻到末尾查看所有的用例,其实并不多 之前有介绍过使用中继器 ...

  8. jq倾斜的动画导航菜单

    效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器 完整源代码,保存到HTML文件打开也可查看效果: & ...

  9. 最近在用placeholder ,是已有的,网上也有不少都是jq写的

    其实除了支持placeholder 的浏览器,其他用js 或jq实现的都不叫placeholder 效果,只能算上是获取焦点,或失去焦点时的一个placeholder 没有出生时就已经存在效果 很多人 ...

随机推荐

  1. 导入PrefixHeader.pch 报错UNknow The type "NSString",等基础类

    进入到项目,在Buid Settings收索Compile Source 把Compile Source As 改成Objective-C问题即可解决.

  2. 关于ubuntu远程访问服务器的知识点

    为了可以打开图形界面,用ssh -X 用户名@地址 如何远程打开文件夹可视化界面 nautilus /文件夹

  3. OnTriggerEnter2D方法

    我两个物体A,B都添加了Circle Collider 2D,并且都勾选了is Trigger,我在A的脚本里用void OnTriggerEnter2D(Collider2D coll)检测碰撞,至 ...

  4. 剑指offer前6题

    二维数组中的查找 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 时间限制:1秒 ...

  5. Big Event in HDU HDU - 1171

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1171 题意:给出每个物体的价值和物体的数量,如何分使得A,B所得价值最接近并且A的价值不能小于B 思路 ...

  6. 前端自动化构建工具 gulp 学习笔记 一、

    一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...

  7. [工作积累] Google Play Services

    注意添加APP_ID <meta-data android:name="com.google.android.gms.games.APP_ID" android:value= ...

  8. Python安装及IDE激活

    简介: Windows10下安装激活Pycharm,并同时安装Python 3.x.2.x,便于在Pycharm开发环境中使用不同版本的解释器进行对比学习. 目录: 一.Python 3.x安装 二. ...

  9. 前端基础:form表单提交

    今天介绍下form表单提交经常用到的表单元素. 1:datalist元素,一般与input组建配合使用,以定义可能输入的值,例如: <!DOCTYPE html> <html lan ...

  10. SQL Server Service Broker 示例(转)

    1.定义数据类型.协议和服务(发送服务和接收服务) USE master; GO ALTER DATABASE 目标数据库 SET ENABLE_BROKER; GO -- 如果上面的操作执行后,长时 ...