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 sortable效果 代码有错但值得看看
Nov 05 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
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 JSON中文乱码的解决方法详解
2013/06/06 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
利用php输出不同的心形图案
2016/04/22 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
javascript window.opener的用法分析
2010/04/07 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
Python查看多台服务器进程的脚本分享
2014/06/11 Python
python k-近邻算法实例分享
2014/06/11 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
行政人员工作职责
2013/12/05 职场文书
工地标语大全
2014/06/18 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
党员个人总结自评
2015/02/14 职场文书