JQuery做为一个轻量级的DOM框架给我们带来许多便利,下面是使用JQuery来实现一个简单的下拉菜单:
1.首先,我们从Google上引用脚本库:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<div class="menu"> <span><a href="#">菜单一</a> </span><span><a href="#">菜单二</a> <div> <a href="#">子项一</a> <a href="#">子项二</a> <a href="#">子项三</a> </div> </span><span><a href="#">菜单三</a> <div> <a href="#">子项一</a> <a hef="#">子项二</a> <a href="#">子项三</a> </div> </span> </div>
3.然后为其定义CSS
<style type="text/css"> .menu span { float: left; margin-right: 10px; position: relative; z-index: 100; } .menu a { text-decoration: none; display: block; } .menu span:hover div, .menu span div:hover { display: block; } .menu span div { border: 1px solid black; padding: 5px; background-color: white; display: none; position: absolute; white-space: nowrap; } </style>
4.hover(over,out)
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
<script type="text/javascript"> $(document).ready(function() { if ($.browser.msie && $.browser.version <= 6.0) { $(".menu span").hover( function() { $(this).children("div").attr("style", "display: block"); }, function() { $(this).children("div").attr("style", ""); }) } }); </script>
这样就可以了,实现一个简单的下拉菜单.
Author: Petter Liu http://wintersun.cnblogs.com
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)