必备工具：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. [原创][LaTex]汇总博文

    0. 简介 为了查找方便,当当当当,灵机一动的设计了这个博文,有了他就能快速的查找一些该话题相关方面的一些博文了,不管是原创.转载.整理,只要是属于我自己整理的LaTex知识,应该都可以在这里找到的. ...

  2. 用纯css改变下拉列表select框的默认样式

    http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...

  3. LoadRunner参数更新方法和数据分配

    参数化的定义:使用指定的数据源中的值来替换脚本录制生成的语句中的参数. 对Vuser脚本进行参数化的好处: 1.减小脚本的大小 2.提供了使用不同的脚本的值执行脚本的能力 参数化涉及两个任务: 1.用 ...

  4. C# Winform学习--- 实现石头剪刀布的游戏

    本文使用winform实现简单的石头剪刀布的游戏,主要实现,电脑随机出拳,玩家手动点击出拳:实现简易背景图片3秒切换:简易统计信息. 1.效果图 2.实现代码 新建一个windows窗体程序,用数字1 ...

  5. 分享自制的13套 JQuery Mobile 界面主题（追加4套新款）

    15套整合在一起的,其中2套官方+13套自制,款款精致,方便移动开发. 字体默认为微软雅黑. 适配于 JQuery Mobile 1.4.3 下载地址:http://files.cnblogs.com ...

  6. 九月二十八JS验证

    js表单验证 js可用发来在数据被送往服务器前对HTML表单中的这些输入数据进行验证 被js验证的这些典型的表单数据有: >用户是否已填写表单中的必填项目: >用户输入的邮件地址是否是合法 ...

  7. en_windows_10_multiple_editions_version_1511_x64.iso

    好久没折腾电脑了,这几天在E盘装了个64位Windows 10 TH2 专业版,从MSDN官网下载的英文原版镜像,用kms10未能激活,一看日志文件,说我这是零售版,后面就关掉了什么监听端口,然后就完 ...

  8. python学习-day14-前端之html、css

    一.Html 1.本质:一个规则,浏览器能任务的规则 2.开发者:        学习Html规则        开发后台程序:            - 写Html文件(充当模板的作用) ***** ...

  9. linux TLS 线程本地变量

    最近在写底层hook的时候, 涉及到线程安全问题, 最开始我设计的时候使用的互斥量, 但是考虑到都是底层函数,加锁会导致性能问题, 一直在思考优化方案, 后来偶然想到,java里面有线程本地变量的AP ...

  10. 【转】Crontab定时任务配置

    原文出处:http://www.cnblogs.com/kerrycode/p/3238346.html CRONTAB概念/介绍 crontab命令用于设置周期性被执行的指令.该命令从标准输入设备读 ...