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 相关文章推荐
Javascript Global对象
Aug 13 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
PHP PDO操作总结
Nov 17 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 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 mysql索引问题
2008/06/07 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
JavaScript错误处理
2015/02/03 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
python从子线程中获得返回值的方法
2019/01/30 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
个人评价范文分享
2014/01/11 职场文书
教师个人自我鉴定
2014/02/08 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
歌舞青春观后感
2015/06/10 职场文书
python munch库的使用解析
2021/05/25 Python
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技