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 17 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 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
PHP header函数分析详解
2011/08/06 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
Javascript中神奇的this
2016/01/20 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
Python实现备份文件实例
2014/09/16 Python
用Python编写简单的定时器的方法
2015/05/02 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
python和shell获取文本内容的方法
2018/06/05 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
给幼儿园老师的表扬信
2014/01/19 职场文书
英文感谢信格式
2015/01/21 职场文书
个人廉洁自律总结
2015/03/06 职场文书
无线电通信名词解释
2022/02/18 无线电