必备工具：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. 转载：shell脚本之sed使用----替换、变量、转义字符

    sed替换的基本语法为:----s后面跟的是分隔符,原字符串可使用.*这种正则表达式进行整行替换 代码如下: sed 's/原字符串/替换字符串/' 单引号里面,s表示替换,三根斜线中间是替换的样式, ...

  2. display:table-cell介绍

    一.display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6 ...

  3. Android开发学习笔记：浅谈显示Intent和隐式Intent

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://liangruijun.blog.51cto.com/3061169/655132 ...

  4. yum源配置与使用

    一.yum 简介 yum,是Yellow dog Updater, Modified 的简称,是杜克大学为了提高RPM 软件包安装性而开发的一种软件包管理器.起初是由yellow dog 这一发行版的 ...

  5. NES模拟器开发-PPU笔记

    20151008 占坑,暂时没弄清楚PPU数据如何初始化,绘制顺序等.

  6. python splinter

    from splinter.browser import Browser with Browser() as b: for url,name in web: b.visit(url) b.fill(' ...

  7. odoo10 费用报销

    odo10 对费用报销进行了改进,恢复了 8.0 及之前版本具有的 单个报销包含多个 明细内容的功能. 使用步骤大致如下: 根据管理需要设立 相应的科目和分析帐户 科目 分析帐户 建立费用目录 员工录 ...

  8. phpredis中文文档 [转]

    phpredis是php的一个扩展,效率是相当高有链表排序功能,对创建内存级的模块业务关系 很有用;以下是redis官方提供的命令使用技巧: 下载地址如下: https://github.com/ow ...

  9. MySQL数据库sql语句的一些简单优化

    1.查询条件的先后顺序 有多个查询条件时,要把效率高能更精确筛选记录的条件放在后边.因为MySQL解析sql语句是从后往前的(不知是否准确). 例: select a.*,b.* from UsrIn ...

  10. Python 第五天 递归，计算器（2）

    利用函数编写如下数列: 斐波那契数列指的是这样一个数列 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233,377,610,987,1597,2584, ...