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


Posted in jQuery onDecember 07, 2017

本文实例讲述了jQuery实现简单的下拉菜单导航功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

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

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>3water.com jQuery导航</title>
    <style type="text/css">
      #menu{width:300px;margin-left:auto;margin-right:auto;}.has_children{background:#555;color:#fff;cursor:pointer;}.highlight{color:#fff;background:green;}
      div{padding:0;}
      div a{background:#888;display:none;float:left;width:300px;}
    </style>
    <!-- 引入 jQuery -->
    <script src="jquery1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
      //等待dom元素加载完毕.
    $(document).ready(function(){
        $(".has_children").click(function(){
          $(this).addClass("highlight")      //为当前元素增加highlight类
          .children("a").show().end()      //将子节点的a元素显示出来并重新定位到上次操作的元素
          .siblings().removeClass("highlight")    //获取元素的兄弟元素,并去掉他们的highlight类
          .children("a").hide();        //将兄弟元素下的a元素隐藏
          });
        });
      </script>
  </head>
  <body>
    <div id="menu">
      <div class="has_children">
        <span>第1章-认识jQuery</span>
        <a>1.1-JavaScript和JavaScript库</a>
        <a>1.2-加入jQuery</a>
        <a>1.3-编写简单jQuery代码</a>
        <a>1.4-jQuery对象和DOM对象</a>
        <a>1.5-解决jQuery和其它库的冲突</a>
        <a>1.6-jQuery开发工具和插件</a>
        <a>1.7-小结</a>
      </div>
      <div class="has_children">
        <span>第2章-jQuery选择器</span>
        <a>2.1-jQuery选择器是什么</a>
        <a>2.2-jQuery选择器的优势</a>
        <a>2.3-jQuery选择器</a>
        <a>2.4-应用jQuery改写示例</a>
        <a>2.5-选择器中的一些注意事项</a>
        <a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
        <a>2.7-还有其它选择器么?</a>
        <a>2.8-小结</a>
      </div>
      <div class="has_children">
        <span>第3章-jQuery中的DOM操作</span>
        <a>3.1-DOM操作的分类</a>
        <a>3.2-jQuery中的DOM操作</a>
        <a>3.3-案例研究——某网站超链接和图片提示效果</a>
        <a>3.4-小结</a>
      </div>
    </div>
  </body>
</html>

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

jQuery 相关文章推荐
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery实现评论模块
Aug 19 jQuery
jquery学习笔记之无new构建详解
Dec 07 #jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 #jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 #jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 #jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 #jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 #jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 #jQuery
You might like
APMServ使用说明
2006/10/23 PHP
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
python中模块的__all__属性详解
2017/10/26 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
环保倡议书50字
2014/05/15 职场文书
先进事迹演讲稿
2014/09/01 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
2014年度安全工作总结
2014/12/04 职场文书
爱心捐书倡议书
2015/04/27 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书