DOM（二）-03-DOM(示例-展开闭合列表)

来源：互联网发布：ios 数据共享编辑：程序博客网时间：2024/06/04 18:17
<!--DOM示例-展开闭合列表这个也是网页中常用的功能演示，其中需要用到CSS技术、DOM技术等希望实际效果是，单击“显示条目一”就能出现下拉菜单--><!--思路：1.标签封装数据，用html2.定义样式，用css3.明确事件源，事件，以及要处理的节点，用dom4.明确具体操作方式，其实就是事件的处理内容 --><html><head><!-- 以下对应思路2：用css定义样式 --><style type="text/css">dl dd{/*关联选择器*/margin:0px;/*将<dd>标签距离左边的外边距设置为0，即左边顶格显示*/}/*希望将“展开列表内容”隐藏：打开CSS API文档，找到布局中的overflow：检索或这是当对象的内容超过其指定高度及宽度时如何管理内容。1.overflow语法：overflow:visible | auto | hidden | scroll2.overflow取值：(1)visible：默认值，不剪切内容也不添加滚动条，假如显式声明此默认值，对象将包含对象的window或frame的尺寸裁切，并且clip属性设置将失效；(2)auto：在必须时对象内容才会被裁切或显示滚动条；(3)hidden：不现实超过对象尺寸的内容；(4)scroll：总是显示滚动条。【总之】本身有个高度指定，即默认就这么高，如果内容超过这个高度，用overflow进行管理，可选的有：(1)overflow(2)auto(3)hidden(4)scroll*/dl{height:16px;overflow:hidden;/* *这里先指定dl标签封装区域的高度为16px，因为网页正常字体大小就是16px，然后再设置布局overflow:hidden， *所以超过16px的内容全部被隐藏。（如果将高度设置为8px，那么第一行“显示条目一”只显示一半） */}</style></head><body><script type="text/javascript">var flag = true;//定义标记，为了下面的ifelsefunction list(){//单击一次“显示条目一”，调用一次该方法，判断一次标记/*思考：如何在单击"显示条目"后出现"展开列表内容"呢？很简单，只要将css样式中的overflow由hidden改为visible即可*//* *思路： *1.无非就是将dl属性的overflow属性的值改为visible即可。 *2.要先获取dl节点。 *3.改变该节点的style中的overflow的属性。 */var oDlNode = document.getElementsByTagName("dl")[0];//注意这里拿到的是数组，所以需要[0]if(flag){oDlNode.style.overflow = "visible";flag = false;}else{oDlNode.style.overflow = "hidden";flag = true;}/*这个ifelse是为了实现鼠标不停单击“显示条目一”会来回“展开”和“收起”剩余条目*/}</script><!-- 以下对应思路1：用html标签封装数据 --><dl><dt onclick="list()">显示条目一</dt><!-- 对应思路3：明确事件源，即<dt>，所以在其中添加onclick --><dd>展开列表内容</dd><dd>展开列表内容</dd><dd>展开列表内容</dd><dd>展开列表内容</dd></dl></body></html>
0 0