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)
                    
                    

                        
                        打赏
                         微信扫一扫  
                    
                


                

                
            
 
                
                

              

                

                

                    
相关文章:
                    


                            

                                 
                    
                    
                        

                            

                                

            
                
                                    

                                        

                                            
QQ聊天记录删除了怎么恢复简单方法
                                            

                                                

            现在朋友之间交流，基本是都是通过qq聊天，如果你一不小心把重要的聊天记录删除了该怎么办呢？下面小编就教你一些小窍门，保证解决你的难题...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            
                            

                                

            
                
                                    

                                        

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

                                                

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

                                

            
                
                                    

                                        

                                            
浅谈Git分支管理策略
                                            

                                                

            如果你严肃对待编程，就必定会使用"版本管理系统"（version control system）。

眼下最流行的"版本管理系统...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            
                            

                                

            
                
                                    

                                        

                                            
JS和C#分别防注入代码
                                            

                                                

            如果你的查询语句是select * from admin where username=''''"&user&"'''' and p...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            
                            

                                

            
                
                                    

                                        

                                            
怎么查QQ聊天记录 怎样恢复删除的手机QQ聊天记录技巧？
                                            

                                                

            现实生活中我们有很多这样的故事，刘先生曾经就为这样的纠结过，被这件事纠结着他难以用正常心去工作，事情是从过国庆节过后的那段时间开始的...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            

                        
                        

                            

                                
                                
                        
                    



                
                

                    
                    
                    

                

                    
                    

                

                    

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

                

                    

                        
发表评论
                    

                    

                        



                                    

                                

                                    

                            

验证码：