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>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                  //上面的判断语句不能只写前半句，否则无法执行

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

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

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

p和li之间的应用上的区别相关推荐

li变成行内块级元素之后，每一个li之间会有间隙，这是为什么?
今天在学习h5的时候,写一个导航栏,当把li变成行内块级元素之后,发现每一个li之间都会有一个小小的间隙,这个间隙是浏览器自带设置的,所以我们要把它清除掉,为什么呢,因为如果不清楚掉的话,每个浏览器默 ...
linux的常用操作——基于ftp的windows10和腾讯云centos操作系统之间的文件上传和下载
\qquad在腾讯云服务器的centos操作系统上,安装vsftpd并进行配置,然后基于ftp实现windows10操作系统和腾讯云centos系统之间的文件上传和下载. 文章目录 1.基于腾讯云服务 ...
Linux系统与Windows系统之间的文件上传与下载
Linux系统与Windows系统之间的文件上传与下载在日常开发过程中,常常会遇到需要在Linux与Windows系统之间的文件的传输,有一些常用的方法与命令,在此记录 1.文件上传从Window ...
Logitech Flow 罗技鼠标在两设备之间连接不上的解决方法
Logitech Flow 罗技鼠标在两设备之间连接不上的解决方法问题描述自己有一个笔记本,加上公司的台式,需要两个键盘两个鼠标才能操作,为了简化操作,购买了logic的flow系列鼠标M590, ...
Java中抽象类和接口在概念、语法和应用上的区别和关系
2019独角兽企业重金招聘Python工程师标准>>> 春招开始了,盆友们都忙着准备笔试.准备面试,复习学过的知识点,当然我也不例外,在这里祝每一个"有心人"心想 ...
mysql8和5.7区别_综合布线产品类别之间有何种联系和区别？
之前小编已经写过一篇关于超5类6类超6类7类综合布线产品之间的联系,但是总感觉不够清楚,这里小编在此基础上重新再来过一次,对于产品之间的关于超5类6类超6类7类之间的介绍再详细一点,以便我们一起交流和 ...
cat6 万兆_干货：CAT5E超五类、CAT6和CAT6A超六类布线系统性能和应用上的区别
原标题:干货:CAT5E超五类.CAT6和CAT6A超六类布线系统性能和应用上的区别在谈到今天这个话题时,嘉兴海棠电子专家表示,在前些年,100M以太网的时代我们的综合布线系统使用五类的布线就已经可 ...
防火墙（NGFW）与UTM本质上的区别
防火墙(NGFW)与UTM本质上的区别: 先说说传统的安全设备: 入侵防御设备 IPS 应用安全防护体系不完善,只能针对操作系统或者应用软件的底层漏洞进行防护,缺乏针对Web攻击威胁的防御能力,对We ...
人工智能和大数据分析之间，主要有什么区别
首先来看看认知计算和人工智能的区别人工智能的概念已经有二十多年,人工智能从历史和研究角度来讲主要目的是为了让机器表现的更像人类,我们称之为Intelligent Behavior.IBM的认知计算从 ...

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

p和li之间的应用上的区别相关推荐

最新文章

热门文章