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

这是自己写的代码:

 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>JavaSriptli>
51                  <li>DIV+CSSli>
52                  <li>jqueryli>
53              ul>
54            <li>后台脚本li>
55             <ul class="elements">
56                  <li>PHPli>
57                  <li>ASPli>
58                  <li>JSPli>
59              ul> 
60            <li>前端框架li>
61            <ul class="elements">
62                  <li>Ext jsli>
63                  <li>Esspressli>
64                  <li>YUIli>
65              ul>
66         ul>
67    div>
68 body>
69 html>

图片是这样的p和li之间的应用上的区别_第1张图片

demo的代码是这样的。

 1 doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Documenttitle>
 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>JavaScriptli>
55                 <li>DIV+CSSli>
56                 <li>jQueryli>
57             ul>
58         div>
59         <div>
60             <p>后台脚本p>
61             <ul>
62                 <li>PHPli>
63                 <li>ASP.netli>
64                 <li>JSPli>
65             ul>
66         div>
67         <div>
68             <p>前端框架p>
69             <ul>
70                 <li>Extjsli>
71                 <li>Esspressli>
72                 <li>YUIli>
73             ul>
74         div>
75     div>
76 body>
77 html>
View Code

p和li之间的应用上的区别_第2张图片

动作效果是这样的:

p和li之间的应用上的区别_第3张图片

还有一个问题,这里的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                  //上面的判断语句不能只写前半句,否则无法执行

如果只是零时的值的话,最后会出现这样的BUG

p和li之间的应用上的区别_第4张图片

每一次点击任意一个p标签,都会显示上面的结果,我也不知道他的深层原理是什么,先记下,以后遇到他的原理,再好好的学习一下。

 

转载于:https://www.cnblogs.com/zhangwei1234/p/5779733.html

你可能感兴趣的:(p和li之间的应用上的区别)