jQuery实现一个简单的下拉菜单导航功能示例

本文通过一个实例说明jQuery实现了下拉菜单的简单导航功能。分享给大家参考，如下：

我们先来看看跑步效果：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title www . JB 51 . net jquery导航/title style type=' text/CSS ' # menu { width :300 px；左边距left:auto右边距： auto；}.has _ children { background : # 555；color: # fffcursor:pointer指针；}.突出显示{ color: # fff背景：绿色；} div { padding:0} div a { background: # 888display:nonefloat:left宽度width:300px} /style！-引入jquery-script src=' http : jquery 1 . 3 . 2 . js ' type=' text/JavaScript '/script script type=' text/JavaScript '/等待dom元素加载。$(文档)。ready (function () {$(')。has _ children’)。单击(function () {$ (this))。add class(' highlight ')//添加高亮类。儿童(' a ')。显示()。end() //显示子节点的A元素，并将其重新定位到最后一个操作元素。兄弟姐妹()。remove class(' highlight ')//获取元素的同级元素并移除它们的highlight类。儿童(' a ')。hide()；//隐藏同级元素下的A元素})；});/script/head body div id=' menu ' div class=' has _ children ' span第1章-了解jQuery/span a1.1-JavaScript和JavaScript库/A 1.2-添加jQuery/A 1.3-编写简单的jQuery代码/A 1.4-jQuery对象和DOM对象/A 1.5-解决jQuery和其他库之间的冲突/A 1.6-jQuery开发工具和插件/A 1.7-摘要/A/div class=' has _ children ' span第2章-jQuery选择器/a a 2.8-summary/a/Div Div class=' has _ children ' span第3章-jquery中的DOM操作/span a 3.1-DOM操作的分类/a a 3.2-jQuery中的DOM操作/a a3.3-案例研究——某网站的超链接和图片提示效果/a a 3.4-summary/a/Div/Div/body/HTMl更多对jQuery感兴趣的读者，请查看本网站主题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》

希望本文对大家的jQuery程序设计有所帮助。