脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery 多级下拉菜单

jquery 多级下拉菜单核心代码

 更新时间：2010年05月21日 02:33:58   作者：  
自己写的一个菜单(因为是初学 不知道能不能算无限级)
jquery
复制代码 代码如下:

$(document).ready(function(){
$("ul li").hover(function(){
$(this).find("ul:first").show();//鼠标滑过查找li下面的第一个ul然后显示；
},function(){
$(this).find("ul:first").hide();//鼠标离开隐藏li下面d的ul；
})
$("ul li ul li ul").prev().addClass("bbb");//给li下面ul是aaa的样式的前一个同辈元素添加css；
})

css
复制代码 代码如下:

ul, li{padding:0;margin:0;}
ul li{float:left;;margin-right:1px;display:inline;list-style:none;text-align:center;}
ul li ul li{float:none;background:#ccc;margin-bottom:1px;display:block;_display:inline;position:relative;}
ul li ul{display:none;}
ul a{text-decoration:none;width:80px;height:20px;line-height:20px;display:block;background:#bbb;font-size:12px}
ul li a:hover{background:#eee;color:#000}
ul li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff}
ul li ul li .aaa li{float:none;}
body .bbb{background:#f00;color:#fff}

html
复制代码 代码如下:

<ul>
<li>
<a href="">栏目一</a>
<ul>
<li><a href="">菜单一</a></li>
<li><a href="">菜单一</a></li>
<li><a href="">菜单一</a></li>
<li><a href="">菜单一</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
</ul>
</li>
<li><a href="">菜单三</a></li>
</ul>
</li>
<li><a href="">菜单三</a></li>
</ul>
</li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">栏目二</a>
</li>
<li>
<a href="">栏目三</a>
<ul>
<li><a href="">菜单三</a>
</li>
<li><a href="">菜单三</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
</ul>
</li>
<li><a href="">菜单三</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a>
<ul class="aaa">
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
</ul>
</li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
</ul>
</li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单三</a></li>
</ul>
</li>
<li>
<a href="">栏目四</a>
</li>
</ul>
您可能感兴趣的文章:

相关文章

  • jQuery控制图片的hover效果（smartRollover.js）

    jQuery控制图片的hover效果（smartRollover.js）

    图片的hover效果可以用css来实现也可以用js来实现。典型的就是smartRollover.js
    2012-03-03
  • 简单常用的幻灯片播放实现代码

    简单常用的幻灯片播放实现代码

    幻灯片自动播放图片是当前网站比较流行的一个展示方式，这里项目需要，我自己做了一个简单的，就不详细讲解了，代码很简单。直接看效果图和代码吧，希望对大家有所帮助
    2013-09-09
  • EasyUI中combobox默认值注意事项

    EasyUI中combobox默认值注意事项

    这篇文章主要介绍了EasyUI中combobox默认值注意事项,是个人在项目中遇到并解决的事宜，分享给大家，需要的朋友可以参考下
    2015-03-03
  • jQuery遍历节点元素方法介绍

    jQuery遍历节点元素方法介绍

    这篇文章介绍了jQuery遍历节点元素的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-03-03
  • jQuery基于muipicker实现仿ios时间选择

    jQuery基于muipicker实现仿ios时间选择

    本文给大家分享的是把jQuery的muipicker插件修改实现仿IOS时间选择特效，非常的不错，有需要的小伙伴可以参考下。
    2016-02-02
  • 轻松搞定jQuery+JSONP跨域请求的解决方案

    轻松搞定jQuery+JSONP跨域请求的解决方案

    了解了jsonp之后，大家应该也都明白了，jsonp主要就是用来实现跨域的获取数据，今天我们就来详细探讨下如何在实际中应用jsonp实现跨域
    2018-03-03
  • jQuery过滤选择器用法示例

    jQuery过滤选择器用法示例

    这篇文章主要介绍了jQuery过滤选择器用法,包括可见性过滤:hidden、:visible,包含过滤:contains等各种常用的过滤选择器,需要的朋友可以参考下
    2016-09-09
  • jQuery实现一个简单的轮播图

    jQuery实现一个简单的轮播图

    本文主要介绍了jQuery实现一个简单轮播图的方法，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • jQuery 3.0 的 setter和getter 模式详解

    jQuery 3.0 的 setter和getter 模式详解

    这篇文章主要介绍了jQuery 3.0 的 setter和getter 模式详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07
  • jquery.map()方法的使用详解

    jquery.map()方法的使用详解

    本文给大家详细介绍了jQuery中的原型方法map的使用指南和源码分析，十分的不错，对于大家学习jQuery非常有帮助，这里推荐给大家。
    2015-07-07

最新评论