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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-mouse-click-show-table-nav-codes/

具体代码如下：

<!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程序设计有所帮助。

赞 (0)

相关推荐

  • 用jquery的方法制作一个简单的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习导航栏的制作</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function() {

  • jQuery Mobile 导航栏代码

    导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内. 默认情况下,导航栏中的链接将自动变成按钮(不需要 data-role="button"). 使用 data-role="navbar" 属性来定义导航栏: 复制代码 代码如下: <div data-role="header"><div data-role="navbar"><ul><li><a href="

  • Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例

    解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: <script type="text/javascript" src="templets/js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function

  • 超炫的jquery仿flash导航栏特效

    FLASH导航现在基本上已经是过时了,但是我们可以用jQuery来实现flash效果,非常的不错. 演示地址:http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html 复制代码 代码如下: <html>  <head>      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">      <

  • JQuery 浮动导航栏实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

  • jQuery点击导航栏选中更换样式的实现代码

    jQuery点击导航栏选中更换样式的实现代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit

  • 简单的jquery左侧导航栏和页面选中效果

    简单的jquery左侧导航栏和页面选中效果

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none" rel="external nofollow" rel="external nofollow" rel="external

  • jquery+css实现侧边导航栏效果

    jquery+css实现侧边导航栏效果

    最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1.效果图 当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2.css代码 这里是css代码,详情请看注释 <style> /*重置一些样式*/ *, *::a

  • jquery实现垂直和水平菜单导航栏

    本文实例为大家分享了jquery菜单导航栏的实现代码,供大家参考,具体内容如下 1. HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>竖直导航菜单</title> <link href="css/Vmenu.css" rel="stylesheet" /> <script

  • JQuery Mobile实现导航栏和页脚

    导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). 导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#" data-role="button" data-icon="home">首页</a&g

随机推荐