必备工具：jquery库文件。我这里用的是1.4版本的。

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
a{ color:olive; text-decoration:none; display:block; padding-left:15px;}
 ul{ list-style:none; margin:0; padding:0;}
 .li{ float:left; margin-left:30px;}
.main{background:olive; background:url(images/daosanjiao.jpg) no-repeat left;}
/*让子菜单消失的样式属性：*/
.submenu{ display:none;}
</style>
<!-- -->
<script src="js/jquery-1.4.js"></script>
<script>
   var flag=true;
   $(function(){
  $('.main').click(function(){
   
   var num=$('.main').index(this);
   if(flag==true){
    $('.main').eq(num).css('background','url(images/zhengsanjiao.jpg) no-repeat left');
    $('.submenu').eq(num).show(100);
    flag=false;
   }else{
    $('.main').eq(num).css('background','url(images/daosanjiao.jpg) no-repeat left');
    $('.submenu').eq(num).hide(100);
    flag=true;
   }   
  });
  
 });
</script>
</head>

<body>
<h2>树形菜单</h2>
<ul >
 <li class="li"><a href="#" class="main">组织结构</a>
        <ul class="submenu">
            <li><a href="#">人事科</a></li>
            <li><a href="#">党务科</a></li>
            <li><a href="#">财务科</a></li>
            <li><a href="#">生产科</a></li>
            <li><a href="#">销售科</a></li>
            <li><a href="#">秘书科</a></li>
            <li><a href="#">器材科</a></li>
            <li><a href="#">餐饮科</a></li>
            <li><a href="#">保卫科</a></li>
        </ul>
    </li>
    <li class="li"><a href="#" class="main">职位体系</a>
     <ul class="submenu">
       <li><a href="#">董事长</a></li>
              <li><a href="#">总经理</a></li>
              <li><a href="#">副总</a></li>
              <li><a href="#">监事</a></li>
              <li><a href="#">工会主席</a></li>
              <li><a href="#">财务主任</a></li>
              <li><a href="#">生产主任</a></li>
              <li><a href="#">秘书科长</a></li>
        </ul>
    </li>
    <li class="li"><a href="#" class="main">分站情况</a>
     <ul class="submenu">
       <li><a href="#">邯郸县</a></li>
              <li><a href="#">永年县</a></li>
              <li><a href="#">肥乡县</a></li>
              <li><a href="#">磁县</a></li>
              <li><a href="#">临漳县</a></li>
              <li><a href="#">武安市</a></li>
              <li><a href="#">曲周县</a></li>
              <li><a href="#">广平县</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

JS——树形导航菜单（html的ul嵌套，jQuery的css()，show(),hide(),index()等方法）的更多相关文章

  1. 在ASP.NET MVC下实现树形导航菜单

    在需要处理很多分类以及导航的时候,树形导航菜单就比较适合.例如在汽车之家上: 页面主要分两部分,左边是导航菜单,右边显示对应的内容.现在,我们就在ASP.NET MVC 4 下临摹一个,如下: 实现的 ...

  2. 用js实现导航菜单点击切换选中时高亮状态

    随着用户点击导航或菜单上不同的页面,出现此选项高亮显示或变为一个新的样式是经常用到的.实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的 ...

  3. js和jquery设置css样式的几种方法

    一.js设置样式的方法 1. 直接设置style的属性  某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性(只能用于某些 ...

  4. jquery 树形导航菜单无限级

    转自:http://www.jb51.net/article/71615.htm 侵删<!DOCTYPE html> <html lang="en"> &l ...

  5. 使用像AdminLTE的前端框架，树形导航菜单实现方式都有哪些？

    之前用easyui等富前端框架开发的时候都是使用封装好的县城的插件,现在使用最新的类似AdminLTE似的前段框架实现树形菜单都用什么方式? 后台拼接html然后前端用JS append方法添加还是直 ...

  6. 导航菜单点击图片切换--jquery

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. js选中当前菜单后高亮显示的导航条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. ExtPB.Net：窗体应用技巧（2）在树形导航下打开弹出的win窗口

    ExtPB.Net的demo程序有个树形导航菜单,里面的菜单打开的窗口放在右边的TabStrip控件中.我们可以设计win通过导航打开,但有时我们希望以弹出窗口的形式打开它,但怎么办呢?现在可以这样修 ...

  9. AntDesign vue学习笔记（五）导航菜单动态加载

    一般的后台系统都有一个树形导航菜单,具体实现如下,主要参考https://my.oschina.net/u/4131669/blog/3048416 "menuList": [ { ...

随机推荐

  1. 关于c#静态构造函数

    http://baike.baidu.com/view/2634573.htm?fr=aladdin 在百科上看到C#的新特性静态构造函数,其中提到静态构造函数“不能继承” 今天做了个试验,发现实际上 ...

  2. js获取get方式传递的参数

    String.prototype.GetValue= function(parm) { var reg = new RegExp("(^|&)"+ parm +" ...

  3. Lucene教程（转）

    Lucene教程 1 lucene简介1.1 什么是lucene    Lucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿来 ...

  4. powerdesigner连接数据库 导出数据

    powerdesigner连接数据库 导出数据 生成PDM文件 傻瓜试教程   也可下载文档:http://download.csdn.net/detail/shutingwang/6378665  ...

  5. Unity3d 着色器语法（Shader）

    Shader "name" { [Properties] Subshaders [Fallback] } 定义了一个着色器.着色器拥有一个 Properties 的列表.着色器包含 ...

  6. Div+CSS命名规范

    注意事项:1.命名遵循驼峰式  2.尽量用中文  3.不加中杠和下划线   4.尽量不缩写,除非一看就明白的单词 头:header   标志:logo  友情链接:friendlink    内容:c ...

  7. python模拟登陆知乎并爬取数据

    一些废话 看了一眼上一篇日志的时间 已然是5个月前的事情了 不禁感叹光阴荏苒其实就是我懒 几周前心血来潮想到用爬虫爬些东西 于是先后先重写了以前写过的求绩点代码 爬了草榴贴图,妹子图网,后来想爬婚恋网 ...

  8. 【转】oracle 监听静态注册举例解析

    网上有很多关于oracle 监听静态注册的文章,但大多都是简单说说,并没有详细的例子,这里,将结合linux as3 下的oracle 10gR2.0.1 举一个具体的例子 1.在 $ORACLE_H ...

  9. jQuery简介

    jQuery简介 jQuery是继Prototype之后的又一个javascript库,它由John Resig创建于2006年1月. Javascript库作用比较: 1. Prototype(ht ...

  10. 三维模型2.5D轮廓提取及遮挡部分的剔除

    轮廓提取相对容易,只需在2.5D渲染视角下,导出模型的顶点坐标以及基于视角的消隐后的三角形面,将三角面投影后合并就可得到轮廓,轮廓坐标基于2.5d图的基准坐标换算就得到.提取轮廓的在我另外一篇文章中有 ...