jquery实现鼠标点击后展开列表内容的导航栏效果


Posted in Javascript onSeptember 14, 2015

本文实例讲述了jquery实现鼠标点击后展开列表内容的导航栏效果。分享给大家供大家参考。具体如下:

这是一款基于jQuery实现的导航栏,鼠标点击后展开隐藏的列表内容,用来制作一个目录是最合适不过的选择。本例是锋利的jQeury中的一个实例,这是最终的优化版本,兼容性还示曾测试,在火狐的表现尚不知情,有兴趣的朋友可测试或修正。

运行效果截图如下:

jquery实现鼠标点击后展开列表内容的导航栏效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jquery导航栏</title>
<style type="text/css">
#menu { 
 width:300px; 
}
.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>
 </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>
 </div>
 <div class="has_children">
  <span>第3章-jQuery中的DOM操作</span>
  <a>3.1-DOM操作的分类</a>
  <a>3.2-jQuery中的DOM操作</a>
 </div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 #Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 #Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 #Javascript
JS动态添加iframe的代码
Sep 14 #Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 #Javascript
window.onload使用指南
Sep 13 #Javascript
JS+CSS简单树形菜单实现方法
Sep 12 #Javascript
You might like
PHP memcache扩展的三种安装方法
2009/04/26 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
php实现webservice实例
2014/11/06 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
vue-cli 首屏加载优化问题
2018/11/06 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
详解分布式任务队列Celery使用说明
2018/11/29 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
python设置中文界面实例方法
2020/10/27 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
人力资源部经理岗位职责规定
2014/02/23 职场文书
节约用水标语
2014/06/11 职场文书
客户经理岗位职责
2015/01/31 职场文书
学校财务管理制度
2015/08/04 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
python实现监听键盘
2021/04/26 Python