p和li之间的应用上的区别

最新推荐文章于 2024-10-25 15:04:44 发布

weixin_30567225

最新推荐文章于 2024-10-25 15:04:44 发布

阅读量1.2k

点赞数

文章标签： xhtml 前端前端框架 ViewUI

原文链接：http://www.cnblogs.com/zhangwei1234/p/5779733.html

版权

这是自己写的代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style>
 7      *{margin:0;padding:0;}
 8      
 9      .box{position:absolute;
10          margin-top:100px;
11      border:1px  solid #999;
12       width:200px; 
13       left:50%;
14       margin-left:-100px;}
15       .parent>li{
16           height:30px;
17           line-height:30px;
18           list-style:none;
19           font-family:"微软雅黑";
20           font-weight:bolder;
21           background-color:#CCC;
22           border-bottom:1px solid #999;
23           }
24           
25       .elements li {
26           height:30px;
27           list-style:none;
28           line-height:30px;
29            border-bottom:1px solid #999;
30           }  
31 </style>
32 <script>
33     window.onload=function(){
34         var oparent = document.getElementById('parent');
35         var oul=oparent.getElementsByTagName(ul);
36         var oli=oparent.getElementsByTagName(li);
37         for(var i=0;i<oli.length;i++){
38             }
39         
40         }
41 
42 </script>
43 </head>
44 <body>
45 <!--今天主动用到文字垂直方向上剧中的技巧；-->
46    <div class="box" id="box">
47         <ul class="parent" id="parent">
48            <li>Web前端</li>
49             <ul class="elements">
50                  <li>JavaSript</li>
51                  <li>DIV+CSS</li>
52                  <li>jquery</li>
53              </ul>
54            <li>后台脚本</li>
55             <ul class="elements">
56                  <li>PHP</li>
57                  <li>ASP</li>
58                  <li>JSP</li>
59              </ul> 
60            <li>前端框架</li>
61            <ul class="elements">
62                  <li>Ext js</li>
63                  <li>Esspress</li>
64                  <li>YUI</li>
65              </ul>
66         </ul>
67    </div>
68 </body>
69 </html>

图片是这样的

demo的代码是这样的。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7     *{margin:0;
 8      padding:0;
 9      font-size:13px;
10      list-style:none;}
11 
12 .menu{width:210px;
13       margin:50px auto;
14       border:1px solid #ccc;}
15 
16 .menu p{height:25px;
17         line-height:25px;
18         font-weight:bold;
19         background:#eee;
20         border-bottom:1px solid #ccc;
21         cursor:pointer;
22         padding-left:5px;}
23 
24 .menu div ul{display:none;}
25 
26 .menu li{height:24px;
27          line-height:24px;
28          padding-left:5px;}
29 </style>
30     <script type="text/javascript">
31     window.onload=function(){
32         var menu=document.getElementById('menu'),
33             ps=menu.getElementsByTagName('p'),
34             uls=menu.getElementsByTagName('ul');
35             for(var i in ps){
36                 ps[i].id=i;
37                 ps[i].onclick=function(){
38                     var u=uls[this.id];
39                     if(u.style.display=='block'){
40                         u.style.display='none';
41                     }else{
42                         u.style.display='block';
43                     }    
44                 }
45             }
46     }
47     </script>
48 </head>
49 <body>
50     <div class="menu" id="menu">
51         <div>
52             <p>Web前端</p>
53             <ul style="display:block">
54                 <li>JavaScript</li>
55                 <li>DIV+CSS</li>
56                 <li>jQuery</li>
57             </ul>
58         </div>
59         <div>
60             <p>后台脚本</p>
61             <ul>
62                 <li>PHP</li>
63                 <li>ASP.net</li>
64                 <li>JSP</li>
65             </ul>
66         </div>
67         <div>
68             <p>前端框架</p>
69             <ul>
70                 <li>Extjs</li>
71                 <li>Esspress</li>
72                 <li>YUI</li>
73             </ul>
74         </div>
75     </div>
76 </body>
77 </html>

View Code

动作效果是这样的：

还有一个问题，这里的p和li直接有某种关系，点击p,显示p下面的li的这种跟随关系，

如果将代码写成这样的话：

1             var id=i;  //零时创建的值；用来记录i，但是demo写的比较正规；
2             ps[i].οnclick=function(){
3             var    u=uls[id];
4             if(u.style.display=='none'){
5                 u.style.display='block';
6                  }else{u.style.display='none'}
7                  //上面的判断语句不能只写前半句，否则无法执行