必备工具：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. Dapper关联查询

    1.一对一: using (IDbConnection connecton = new MySqlConnection(ConfigurationManager.ConnectionStrings[& ...

  2. 如何去掉Eclipse里面自动追加的一些注释！！！内详

    比如我创建一个类,勾选了自动生成main函数.他就来一个// TODO Auto-generated method stub比如我输入"try"然后自动补完try catch bl ...

  3. Fedora22编译Qt3.3.X

    FC22编译QT3 安装g++ dnf install gcc-c++ 1,configure ./configure -thread -no-nis -system-libpng -system-l ...

  4. IIS 7 的 500 內部錯誤

    印象中這個有名的錯誤提示從 ASP 時代就已經存在 不是很明白微軟怎麼想的 你們所面對的客戶族群有為數不少的開發人員 除錯環境對開發者來說算是基本配備 為何不把這些相關設定做成「出廠預設值」? 都幾年 ...

  5. [译]关于iOS和OS X废弃的API你需要知道的一切

    原文: Everything You Need to Know about iOS and OS X Deprecated APIs 如你所知,已废弃(Deprecated)的API指的是那些已经过时 ...

  6. 安装ubuntu系统

    1. CTRL+ALT+F2 由图形界面进入命令行界面 ALT+CTRL+F7切换到图形界面 2. ubuntu12.04不会在安装时确定root的密码,需要你在后来更改密码有其他方法更改文件:在终端 ...

  7. sprintf()函数，把数字转换成字符串

    char str_2[10];     int a=1234321;     sprintf(str_2,"%d",a);

  8. c# 写着玩的，两个Task并发,一个写队列一个读队列的异常情况

    class Program { class TestEnqueue { static Queue<string> str = new Queue<string>(); publ ...

  9. 王爽-汇编语言-综合研究四-不使用main函数编程

    (一) 研究目的 使用C语言编程,我们一定要使用main函数么? (二) 研究过程 1) 最初的程序 首先,我们编写一个不写main函数的C语言程序. 程序如下: 在编译的过程中,没有发现错误.在链接 ...

  10. 关于Spring和mybatis的整合

    Spring同Mybatis的整合 1.引入相应的jar包.(Mybatis的jar包,Spring的jar包,mybatis-spring-1.1.1.jar). 2.编写相应的包(三层的包).搭建 ...