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中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 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
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
jQuery 自定义函数写法分享
2012/03/30 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
python 正则表达式 概述及常用字符
2009/05/04 Python
python中星号变量的几种特殊用法
2016/09/07 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
基于python实现聊天室程序
2018/07/27 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
python读写csv文件实例代码
2019/07/05 Python
python读取并写入mat文件的方法
2019/07/12 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
住宅使用说明书
2014/05/09 职场文书
证婚人致辞精选
2015/07/28 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js