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

演示查看

 
 
 
 
简易三级目录演示 
 

                    

                        
                        

                

                    

                         赞 (0)
                    
                    

                        
                        打赏
                         微信扫一扫  
                    
                


                

                
            
 
                
                

              

                

                

                    
相关文章:
                    


                            

                                 
                    
                    
                        

                            

                                

            
                
                                    

                                        

                                            
PHP getName()函数讲解
                                            

                                                

            php getname() 函数
实例
返回 xml 元素及其子元素的名称：


<?php 
$xml=...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            
                            

                                

            
                
                                    

                                        

                                            
使用 CodeMirror 打造属于自己的带高亮显示的在线代码编辑器
                                            

                                                

            前提
写这个的目的是因为之前项目里用到过 codemirror，觉得作为一款在线代码编辑器还是不错，也看到过有些网站用到过在线代码...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            
                            

                                

            
                
                                    

                                        

                                            
Asp.Net MVC记住用户登录信息下次直接登录功能
                                            

                                                

            有的时候做网站，就需要记住用户登录信息，下次再登录网站时，不用重复输入用户名和密码，原理是浏览器的cookie把状态给记住了！
那...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            
                            

                                

            
                
                                    

                                        

                                            
PHP addslashes()函数讲解
                                            

                                                

            php addslashes() 函数
实例
在每个双引号（"）前添加反斜杠：


<?php 
$str...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            
                            

                                

            
                
                                    

                                        

                                            
PHP count()函数讲解
                                            

                                                

            php count() 函数
实例
计算 car 节点的子节点个数：


<?php 
$xml=<...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            

                        
                        

                            

                                
                                
                        
                    



                
                

                    
                    
                    

                

                    
                    

                

                    

                        版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。
                        如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实将立刻删除。
                    
                

                

                    

                        
发表评论
                    

                    

                        



                                    

                                

                                    

                            

验证码：