当前位置：主页 > 查看内容

javascript css实现三级目录(简单的)

发布时间：2021-07-12 00:00| 有位朋友查看

简介：是在原先的二级目录改的,先给出演示这里是css /*bg macji(http://www.macji.com)*/ ul,li,p{margin:0; padding:0; list-style:none; font-size:12px} .m_menu_title{height:24px;line-height:24px;text-align:center;margin:0 1px} .m_menu_content{border-……

是在原先的二级目录改的,先给出演示

这里是css

/*bg macji(http://www.macji.com)*/ 
ul,li,p{margin:0; padding:0; list-style:none; font-size:12px} 
.m_menu_title{height:24px;line-height:24px;text-align:center;margin:0 1px} 
.m_menu_content{border-top:solid 1px #ccc;padding:8px 2px} 

/*一级*/ 
.m_menu_content p{height:22px;line-height:22px} 
.m_menu_content p a{ 
 color:#666633; 
 font-weight:bold; 
 text-decoration:none; 
 background:url(http://www.macji.com/blog/img/icon.gif) no-repeat 8px 4px; 
 padding:0 0 0 30px; 
 display:block 
} 
.m_menu_content p a:hover{color:#fe8005;font-weight:bold;text-decoration:none} 
.m_menu_content p a.on{background-position:8px -18px} 

/*二级*/ 
.menu2{} 
.menu2 li{line-height:22px} 
.menu2 a{color:#000; 
 text-decoration:none; 
 display:block; 
 padding:0 0 0 40px; 
 background:url(http://www.macji.com/blog/img/icon.gif) no-repeat 18px 4px 
} 
.menu2 a.on{background-position:18px -18px} 

/*三级*/ 
.menu2 ul{} 
.menu2 ul a{ 
 background-position:30px -39px; 
 padding:0 0 0 50px; 
 color:#666633; 
 text-decoration:underline 
} 
.menu2 ul a:hover{background-color:#f5f5f5; color:#f60}

目录是循环的,我给写死了.下面给出js

/* 
这里是直接写死了,根据传入的id编号,判断是否显示,不显示就显示 
id编号是有规律的,可用服务器端语言循环出目录 
*/ 
function setMenuList(num){ 
 var p = document.getElementById('p' + num); 
 var ul = document.getElementById('ul' + num); 
 if(ul.style.display == ‘none'){ 
 ul.style.display = ”; 
 p.className = “on”; 
 }else{ 
 ul.style.display = ‘none'; 
 p.className = “”; 
 } 
}

演示查看

<!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> 
<!-- 
/*bg maiji(http://www.macji.com)*/ 
ul,li,p{margin:0; padding:0; list-style:none; font-size:12px} 
.m_menu_title{height:24px;line-height:24px;text-align:center;margin:0 1px} 
.m_menu_content{border-top:solid 1px #ccc;padding:8px 2px} 
/*一级*/ 
.m_menu_content p{height:22px;line-height:22px} 
.m_menu_content p a{color:#666633;font-weight:bold;text-decoration:none;background:url(http://www.macji.com/blog/img/icon.gif) no-repeat 8px 4px;padding:0 0 0 30px;display:block} 
.m_menu_content p a:hover{color:#fe8005;font-weight:bold;text-decoration:none} 
.m_menu_content p a.on{background-position:8px -18px} 
/*二级*/ 
.menu2{} 
.menu2 li{line-height:22px} 
.menu2 a{color:#000; text-decoration:none; display:block; padding:0 0 0 40px; background:url(http://www.macji.com/blog/img/icon.gif) no-repeat 18px 4px;} 
.menu2 a.on{background-position:18px -18px} 
/*三级*/ 
.menu2 ul{} 
.menu2 ul a{background-position:30px -39px; padding:0 0 0 50px; color:#666633; text-decoration:underline} 
.menu2 ul a:hover{background-color:#f5f5f5; color:#f60} 

</style> 
</head> 

<body> 
<div style="width:200px; border:solid 1px #ccc"> 
  <div class="m_menu_title"><a href='http://fanben.1330.cn/guanli/' target='_blank'><u>管理</u></a>中心</div> 
 <div class="m_menu_content"> 
  <p><a href="#his" onclick="setMenuList(1)" id="p1">一级目录(老大)</a></p> 
  
   <ul id="ul1" class="menu2" style="display:none"> 
  <li> 
   <a href="#his" onclick="setMenuList(11)" id="p11">二级目录(老二)</a> 
   <ul id="ul11" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
   
  <li> 
   <a href="#his" onclick="setMenuList(12)" id="p12">二级目录(老二)</a> 
   <ul id="ul12" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
   
  <li> 
   <a href="#his" onclick="setMenuList(13)" id="p13">二级目录(老二)</a> 
   <ul id="ul13" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
  </ul>   
  
  <p><a href="#his" onclick="setMenuList(2)" id="p2">一级目录2(老大)</a></p> 
  
   <ul id="ul2" class="menu2" style="display:none"> 
  <li> 
   <a href="#his" onclick="setMenuList(21)" id="p21">二级目录(老二)</a> 
   <ul id="ul21" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
   
  <li> 
   <a href="#his" onclick="setMenuList(22)" id="p22">二级目录(老二)</a> 
   <ul id="ul22" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
   
  <li> 
   <a href="#his" onclick="setMenuList(23)" id="p23">二级目录(老二)</a> 
   <ul id="ul23" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
  </ul> 
  
  <p><a href="#his" onclick="setMenuList(3)" id="p3">一级目录2(老大)</a></p> 
  
   <ul id="ul3" class="menu2" style="display:none"> 
  <li> 
   <a href="#his" onclick="setMenuList(31)" id="p31">二级目录(老二)</a> 
   <ul id="ul31" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
   
  <li> 
   <a href="#his" onclick="setMenuList(32)" id="p32">二级目录(老二)</a> 
   <ul id="ul32" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
   
  <li> 
   <a href="#his" onclick="setMenuList(33)" id="p33">二级目录(老二)</a> 
   <ul id="ul33" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
  </ul> 
     
  <p><a href="#his" class="on">退出</a></p> 
 </div> 
</div> 
  
</body> 
</html> 

  [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持尊托云数。

原文链接：https://m.jb51.net/article/13167.htm
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！

上一篇：asp下sql和access数据库随机取10条记录的代码newid() 下一篇：没有了

推荐图文



github 常用命令总结大全

网络编程

js实现简单商品筛选功能

网络编程

【ElasticSearch入门】Windows下ElasticSearch、Hea

网络编程

学会这21条，你离Vim大神就不远了！

网络编程

百万级MySQL的数据量，该如何快速的完成数据迁移？

网络编程

在VSCode中如何配置Python开发环境

网络编程

周排行

月排行

总排行

1 学习如何书写整洁规范的HTML标记

2 利用MSXML2.XmlHttp和Adodb.Stream采集图

3 HTTP长连接与短连接使用方法及测试详解

4 vue 在单页面应用里使用二级套嵌路由

5 学会这21条，你离Vim大神就不远了！

6 php实现图片压缩处理

7 vue中实现点击空白区域关闭弹窗的两种方

8 vue图片裁剪插件vue-cropper使用方法详解

9 JSP Struts过滤xss攻击的解决办法

10 干货：Linux中使用 Basename 命令实例

1 解析C语言中数据在内存中的存储

2 vue实现简易计算器功能

3 Jenkins Pipeline 动态使用分支名，触类

4 一次MySQL索引面试，被面试官怼的体无完

5 s:set 和 s:date 使用, 在jsp判断日期

6 在Asp.Net Core中使用ModelConvention实

7 程序员必备的 10 大 GitHub 仓库，前端占

8 将html文本中所有的标签替换掉的方法

9 MyBatis resultMap元素详解

10 微信小程序开发：腾讯地图集成步骤（旧题

1 asp实现的可以提醒生日的几种方法附代码

2 一文搞懂MySQL行锁、表锁、间隙锁详解

3 输入一个网址的时候，后台到底发生了一件

4 ADI最新基带处理芯片 ADRV9026, 4通道MIM

5 浅谈HTML的语义化和一些简单优化

6 Android Studio 连接mysql踩坑经历

7 HTML基础总结推荐(标题)

8 ZooKeeper基本原理你懂了么？

9 MySQL它不香吗，为什么还要NoSQL？

10 打开我的收藏夹 -- Python数据分析杂谈

随机推荐

详解Hibernate注解方式的二级缓存

详解Hibernate注解方式的二级缓存 hibernate默认情况下是支持一级缓存，也就是se...

.NET/C#利用反射调用含ref或out参数的方

前言使用反射，我们可以很容易地在运行时调用一些编译时无法确定的属性、方法等...

开源的最大谎言

开源是我在行业中遇到过的最有趣的事情之一。这项运动本质上是将人们聚集在一起...

STM32

STM32 一STM32F1 GPIO工作原理二编写跑马灯实验——库函数一STM32F1 GPIO工作...

如何在Windows 10中使用命令提示符打开文

尽管有更快的方法来打开文件资源管理器(例如：使用键盘快捷键windows + E)，但是...

谷歌胜诉！10年Java版权案终结

长达十年的甲骨文诉谷歌安卓系统 Java 源代码侵权案终于尘埃落定美国最高法院本...

PHP 扩展Memcached命令用法实例总结

本文实例讲述了PHP 扩展Memcached命令用法。分享给大家供大家参考，具体如下： ...

IDEA debug提示Connected to the target

不知道各位友友们是否遇到这种情况我遇到很久了一直没有注意如何解决都直接是run...

MVC中基于Ajax和HTML5实现文件上传功能

引言在实际编程中，经常遇到实现文件上传并显示上传进度的功能，基于此目的，本...

vue开发chrome插件，实现获取界面数据和

前言最近在评估项目时，要开启评估平台，查看平台和保存平台，感觉非常繁琐，开...

javascript css实现三级目录(简单的)

推荐图文

随机推荐

关于我们