我是靠谱客的博主 坦率小鸽子,最近开发中收集的这篇文章主要介绍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 = “”; 
  } 
}

演示查看

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

最后

以上就是坦率小鸽子为你收集整理的javascript css 三级目录(简单的)的全部内容,希望文章能够帮你解决javascript css 三级目录(简单的)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(89)

评论列表共有 0 条评论

立即
投稿
返回
顶部