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实现可拖动进度条实例代码
Jun 21 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 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
论坛头像随机变换代码
2006/10/09 PHP
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Python3标准库总结
2019/02/19 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
Python sep参数使用方法详解
2020/02/12 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
Python字符串格式化方式
2022/04/07 Python
Web应用开发TypeScript使用详解
2022/05/25 Javascript