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基本对象
Jan 11 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 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
在字符串中把网址改成超级链接
2006/10/09 PHP
一个PHP日历程序
2006/12/06 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
php实现的生成排列算法示例
2019/07/25 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
jQuery中的常用事件总结
2009/12/27 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
详解django自定义中间件处理
2018/11/21 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
中专毕业个人的自荐信格式
2013/09/21 职场文书
运动会入场词60字
2014/02/15 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
安全生产承诺书范文
2014/05/22 职场文书
婚宴主持词
2015/06/30 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书