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 06 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 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设计模式之工厂模式与单例模式
2016/09/28 PHP
php微信开发之百度天气预报
2016/11/18 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
python实现网站微信登录的示例代码
2019/09/18 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
python logging添加filter教程
2019/12/24 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
python time.strptime格式化实例详解
2021/02/03 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
英语教育专业自荐信
2014/05/29 职场文书
2014中考励志标语
2014/06/05 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
个性与发展自我评价
2015/03/06 职场文书
答辩状格式范本
2015/05/22 职场文书
Python基础之Socket通信原理
2021/04/22 Python
总结Python使用过程中的bug
2021/06/18 Python