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; 
 backgroundnull:url(https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-7550ba5dafe152e3dd03ea47432c9b0f.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; 
 backgroundnull:url(https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-7550ba5dafe152e3dd03ea47432c9b0f.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 = “”; 
 } 
}

演示查看

 
 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
<title>简易三级目录演示</title> 
<div class="lbd_bot clearfix">
                            <span class="jbTestPos" id="art_bot"></span>
                        </div><div class="tags clearfix">
                            <i class="icon-tag"></i>
                            <ul class="meta-tags">
                                <li class="tag item"><a href="http://common.jb51.net/tag/javascript/1.htm" rel="nofollow" target="_blank" title="搜索关于javascript的文章">javascript</a></li>
<li class="tag item"><a href="http://common.jb51.net/tag/css/1.htm" rel="nofollow" target="_blank" title="搜索关于css的文章">css</a></li>
<li class="tag item"><a href="http://common.jb51.net/tag/%E4%B8%89%E7%BA%A7%E7%9B%AE%E5%BD%95/1.htm" rel="nofollow" target="_blank" title="搜索关于三级目录的文章">三级目录</a></li>

                            </ul>
                        </div><div class="lbd clearfix">
                            <span class="jbTestPos" id="art_down"></span>
                        </div><div id="shoucang"></div><div class="xgcomm clearfix">
                            <h2>相关文章</h2>
                            <ul><li class="lbd clearfix"><span class="jbTestPos" id="art_xg"></span></li><li><div class="item-inner"><a class="img-wrap" href="https://www.jb51.net/article/25717.htm" target="_blank" title="ASP同一站点下gb2312和utf-8页面传递参数乱码的终极解决方法"> <img alt="ASP同一站点下gb2312和utf-8页面传递参数乱码的终极解决方法" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-1a1b05c64693fbf380aa1344a7812747.png"> </a><div class="rbox"><div class="rbox-inner"><p><a class="link title" href="https://www.jb51.net/article/25717.htm" target="_blank" title="ASP同一站点下gb2312和utf-8页面传递参数乱码的终极解决方法">ASP同一站点下gb2312和utf-8页面传递参数乱码的终极解决方法</a></p><div class="item-info"><div class="js">要解决ASP同一站点下gb2312和utf-8页面传递参数乱码问题，只需严格做到以下4点即可。</div><span class="lbtn" style="float:right"> 2010-12-12 </span></div></div></div></div></li>
<li><div class="item-inner"><a class="img-wrap" href="https://www.jb51.net/article/16084.htm" target="_blank" title="js table排序类代码"> <img alt="js table排序类代码" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-4f55910a645b073bc4fc65dc10dc14bd.png"> </a><div class="rbox"><div class="rbox-inner"><p><a class="link title" href="https://www.jb51.net/article/16084.htm" target="_blank" title="js table排序类代码">js table排序类代码</a></p><div class="item-info"><div class="js">可以对表格的各列进行排序的函数类</div><span class="lbtn" style="float:right"> 2008-10-10 </span></div></div></div></div></li>
<li><div class="item-inner"><a class="img-wrap" href="https://www.jb51.net/article/8098.htm" target="_blank" title="asp中利用CSW中文分词组件来实现自己网站的内容关键词自动提取"> <img alt="asp中利用CSW中文分词组件来实现自己网站的内容关键词自动提取" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-0ea3c7666119d5615e582f823fb3fad6.png"> </a><div class="rbox"><div class="rbox-inner"><p><a class="link title" href="https://www.jb51.net/article/8098.htm" target="_blank" title="asp中利用CSW中文分词组件来实现自己网站的内容关键词自动提取">asp中利用CSW中文分词组件来实现自己网站的内容关键词自动提取</a></p><div class="item-info"><div class="js">asp中利用CSW中文分词组件来实现自己网站的内容关键词自动提取...</div><span class="lbtn" style="float:right"> 2007-03-03 </span></div></div></div></div></li>
<li><div class="item-inner"><a class="img-wrap" href="https://www.jb51.net/article/3786.htm" target="_blank" title="获取字符中中文首字字符"> <img alt="获取字符中中文首字字符" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-4f96a78db829b1556ff16de21e013c7a.png"> </a><div class="rbox"><div class="rbox-inner"><p><a class="link title" href="https://www.jb51.net/article/3786.htm" target="_blank" title="获取字符中中文首字字符">获取字符中中文首字字符</a></p><div class="item-info"><div class="js">获取字符中中文首字字符...</div><span class="lbtn" style="float:right"> 2006-10-10 </span></div></div></div></div></li>
<li><div class="item-inner"><a class="img-wrap" href="https://www.jb51.net/article/23069.htm" target="_blank" title="C#入门教程之ListBox控件使用方法"> <img alt="C#入门教程之ListBox控件使用方法" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-8cc1031babc6aff2319f1c6af8544aa0.png"> </a><div class="rbox"><div class="rbox-inner"><p><a class="link title" href="https://www.jb51.net/article/23069.htm" target="_blank" title="C#入门教程之ListBox控件使用方法">C#入门教程之ListBox控件使用方法</a></p><div class="item-info"><div class="js">本文讲一下C#中ListBox控件的使用方法，也可以作为一门入门教程吧，请下本文的详细讲解。</div><span class="lbtn" style="float:right"> 2010-04-04 </span></div></div></div></div></li>
<li><div class="item-inner"><a class="img-wrap" href="https://www.jb51.net/article/32640.htm" target="_blank" title="ASP中DateAdd函数中日期相加或相减使用方法"> <img alt="ASP中DateAdd函数中日期相加或相减使用方法" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-0c932a99bb7b6f23c937db507070cc7b.png"> </a><div class="rbox"><div class="rbox-inner"><p><a class="link title" href="https://www.jb51.net/article/32640.htm" target="_blank" title="ASP中DateAdd函数中日期相加或相减使用方法">ASP中DateAdd函数中日期相加或相减使用方法</a></p><div class="item-info"><div class="js">本文将介绍ASP中DateAdd函数中日期相加或相减使用方法,需要了解的朋友可以参考下</div><span class="lbtn" style="float:right"> 2012-12-12 </span></div></div></div></div></li>
<li><div class="item-inner"><a class="img-wrap" href="https://www.jb51.net/article/15442.htm" target="_blank" title="asp OpenTextFile文本读取与写入实例代码"> <img alt="asp OpenTextFile文本读取与写入实例代码" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-cca732bf65a93ed2ec0ac80c638460fe.png"> </a><div class="rbox"><div class="rbox-inner"><p><a class="link title" href="https://www.jb51.net/article/15442.htm" target="_blank" title="asp OpenTextFile文本读取与写入实例代码">asp OpenTextFile文本读取与写入实例代码</a></p><div class="item-info"><div class="js">打开指定的文件并返回一个 TextStream 对象，可以读取、写入此对象或将其追加到文件。  </div><span class="lbtn" style="float:right"> 2008-08-08 </span></div></div></div></div></li>
<li><div class="item-inner"><a class="img-wrap" href="https://www.jb51.net/article/16139.htm" target="_blank" title="asp截取指定英汉混合字符串_支持中文"> <img alt="asp截取指定英汉混合字符串_支持中文" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-2d9f31f2af7b675a3d153d2b7f1035a7.png"> </a><div class="rbox"><div class="rbox-inner"><p><a class="link title" href="https://www.jb51.net/article/16139.htm" target="_blank" title="asp截取指定英汉混合字符串_支持中文">asp截取指定英汉混合字符串_支持中文</a></p><div class="item-info"><div class="js">本函数作用是截取指定英汉混合字符串，并保持显示长度一至。就是将一个汉字当两英文来截取。</div><span class="lbtn" style="float:right"> 2008-10-10 </span></div></div></div></div></li>
<li><div class="item-inner"><a class="img-wrap" href="https://www.jb51.net/article/6628.htm" target="_blank" title="一种理论上最快的Web数据库分页方法"> <img alt="一种理论上最快的Web数据库分页方法" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-b452cee8ec5cd9e58ab98eba17281e59.png"> </a><div class="rbox"><div class="rbox-inner"><p><a class="link title" href="https://www.jb51.net/article/6628.htm" target="_blank" title="一种理论上最快的Web数据库分页方法">一种理论上最快的Web数据库分页方法</a></p><div class="item-info"><div class="js">一种理论上最快的Web数据库分页方法...</div><span class="lbtn" style="float:right"> 2007-01-01 </span></div></div></div></div></li>
<li><div class="item-inner"><a class="img-wrap" href="https://www.jb51.net/article/10369.htm" target="_blank" title="万能Asp防注入代码 拒绝攻击"> <img alt="万能Asp防注入代码 拒绝攻击" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-f4838ec7e2d4da28e0b57d4e852dadd4.png"> </a><div class="rbox"><div class="rbox-inner"><p><a class="link title" href="https://www.jb51.net/article/10369.htm" target="_blank" title="万能Asp防注入代码 拒绝攻击">万能Asp防注入代码 拒绝攻击</a></p><div class="item-info"><div class="js">万能Asp防注入代码 拒绝攻击...</div><span class="lbtn" style="float:right"> 2007-06-06 </span></div></div></div></div></li>
</ul>
                        </div><div class="lbd clearfix mt5">
                            <span class="jbTestPos" id="art_down2"></span>
                        </div><a href="https://www.jb51.net/article/13167.htm#comments"></a><div id="comments">
                            <h2>最新评论</h2>
                            <div class="pd5">
                                <div id="SOHUCS" sid="art_13167"></div>
                            </div>
                        </div>

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

大家感兴趣的内容

最近更新的内容

常用在线小工具