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

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

这里是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 = “”;
 }
}

演示查看



简易三级目录演示 

管理中心

一级目录(老大)
  • 二级目录(老二)
    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理
  • 二级目录(老二)
    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理
  • 二级目录(老二)
    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理
一级目录2(老大)
  • 二级目录(老二)
    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理
  • 二级目录(老二)
    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理
  • 二级目录(老二)
    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理
一级目录2(老大)
  • 二级目录(老二)
    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理
  • 二级目录(老二)
    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理
  • 二级目录(老二)
    • 档案管理
    • 日志管理
    • 相册管理
    • 视频管理
    • 音乐管理
    • 房间管理
    • 物品管理
退出 /* 这里是直接写死了,根据传入的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 = ""; } } > [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vuejs使用递归组件实现树形目录的方法

    上篇文章我提到了通讯录的开发,里面的目录使用了vue的递归组件实现的树形目录,这篇文章就来讲讲如何实现树形目录吧! 首先实现效果如下,觉得菜单还是比较nice的是吧: 这边数据调用的是数据库的数据的,需要数据库进行数据的构造,这里涉及到java的构造多叉树的知识,后续我会另外写一篇文章详细讲解,这里讲下前端. 数据可以先构造json使用,这里用到的格式大概如下,以childList来嵌套子菜单: { id:YH, name:银行, pid:0, childList:[{ id:YH******,

  • asp.net 获取指定文件夹下所有子目录及文件(树形)

    #region 获取指定文件夹下所有子目录及文件(树形)         /****************************************          * 函数名称:GetFoldAll(string Path)          * 功能说明:获取指定文件夹下所有子目录及文件(树形)          * 参    数:Path:详细路径          * 调用示列:          *           string strDirlist = Server.M

  • BootStrap实现树形目录组件代码详解

    需求描述 产品添加页面,需要选择车型.在bootStrap的modal上弹出子modal来使用. 车型一共有4级目录.要使用目录树. 然后分活动和商品两种,需要能够通过不通参数来调用该组件. 车型品牌要使用字母导航. 技术实现 数据都是后端传json过来,我们ajax获取然后操作. 由于车型总数据有几万条以上,不可能一次性请求过来.这里我们使用异步的方式,每点击一次目录节点,加载它的下一级. 这里我们用两个参数来控制活动和商品的不同加载._showPrice和opened 后端传过来的第一级数据

  • Java遍历输出指定目录、树形结构所有文件包括子目录下的文件

    下面通过一段代码介绍下Java输出指定目录.树形结构下的所有文件包括子目录中的文件的方法,并附有效果图. import java.io.File; public class ReadDirectory { // 文件所在的层数 private int fileLevel; /** * 生成输出格式 * @param name 输出的文件名或目录名 * @param level 输出的文件名或者目录名所在的层次 * @return 输出的字符串 */ public String createPri

  • python实现树形打印目录结构

    本文实例为大家分享了python树形打印目录结构的具体代码,供大家参考,具体内容如下 前言 这两天整理数据文件的时候发现,一层层的点击文件夹查看很繁琐,于是想写一个工具来递归打印出文件目录的树形结构,网上找了一些资料几乎都是使用的os.walk, 调试了以后发现返回的貌似的是一个"生成器",只需要for循环即可,可是这样得到的好像是BFS的结构,并不是我想要的树形结构,最后终于发现了os.listdir这个函数,可是使用它来写一个深度优先搜索,只要递归调用就能解决我的问题. 代码 #!

  • jquery实现的树形目录实例

    本文实例讲述了jquery实现的树形目录.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .st_tree ul li { font-size:13p

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

    是在原先的二级目录改的,先给出演示 这里是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

  • javascript css 三级目录(简单的)

    是在原先的二级目录改的,先给出演示 这里是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 #c

  • JavaScript+CSS无限极分类效果完整实现方法

    本文实例讲述了JavaScript+CSS无限极分类效果完整实现方法.分享给大家供大家参考,具体如下: CSS样式: a {text-decoration:none;} a,a:visited {color:#000;background:inherit;} body {margin:0;padding:20px;font:12px tahoma,宋体,sans-serif;} dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;} dd

  • JavaScript+css+HTML实现移动端轮播图(含源码)

    目录 1.移动轮播图 2.案例分析 3.关于anime.js 1.移动轮播图 移动端轮播图与PC段轮播图,在技术选择上是有区别的,因为移动端的浏览器版本非常好,对于H5和CSS3的支持非常完美,所以很多效果可以CSS3的方式实现,比如可以使用 Transorm 属性替代原来的动画函数 可以自动播放图片 手指可以拖动播放轮播图 添加指示器,但只起到指示作用,点击不能切换图片 不需要左右导航 因为移动端轮播图的宽度一般与屏幕一样宽,所以focus不设置宽度 移动端使用CSS3的方式进行图片切换,所以

  • JavaScript+node实现三级联动菜单

    本文实例为大家分享了JavaScript+node实现三级联动菜单的具体代码,供大家参考,具体内容如下 项目分析 1.效果 2.前端 =>面向对象 =>首先分析下拉结构,构造相应的结构和样式 =>绑定事件,点击,鼠标滑过等 =>导入写好的 js 文件 构造菜单项. =>使用ajax请求服务端 获取数据 =>用每次获取的数据动态生成页面结构 3.服务端 =>接口文档(定义接口,服务地址,端口} =>存储数据 =>创建服务器 =>接收前端的ajax请

  • JavaScript基于DOM操作实现简单的数学运算功能示例

    本文实例讲述了JavaScript基于DOM操作实现简单的数学运算功能.分享给大家供大家参考,具体如下: <!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"

  • 利用css+原生js制作简单的钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分 html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet'

  • Javascript下拉刷新的简单实现

    本文实例为大家分享了Javascript下拉刷新的简单实现代码,供大家参考,具体内容如下 Html相关代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimu

  • js编写三级联动简单案例

    刚给学妹写了个简单的地区的三级联动简单案例,分享给正在学习的朋友参考下 <html> <head> <!--导入jquery--> <script type="text/javascript"src="jquery1.7.1.js"></script> </head> <script type="text/javascript"> $(function(){//页

  • javascript 动态样式添加的简单实现

    异步加载css文件或者异步加载css模块,支持所有浏览器,包括IE,参考至javascript高级编程 1.createLink方法用于创建一个style标签并添加到head标签中 2.createModule方法用于创建一个style样式表的标签,并且如果在IE8以下的版本运行会抛出异常,在异常捕获模块中执行style.styleSheet.cssText兼容IE添加style的样式内容. <button id="demo">css文件</button> &l

随机推荐