（7）展开闭合列表：布局overflow在列表中应用

xiaoxiao2021-02-28 90

<title>无标题文档</title> <style type="text/css"> dl dd/*关联选择器*/ { margin:0px; } dl{ height:16px; overflow:hidden;/*只保留“显示条目一”，其他隐藏*/ } .open { overflow:visible; } .close { overflow:hidden; } </style> </head> <body> <script type="text/javascript"> /* var flag=true; function list() { //获取要处理的节点，dl var node=document.getElementsByTagName("dl")[0]; if(flag) { node.style.overflow="visible"; flag=false; } else { node.style.overflow="hidden"; flag=true; } } */ function list2() { //1,获取dl节点 var node=document.getElementsByTagName("dl")[0]; //2，设置dl的className属性值,通过判断属性值来切换 if(node.className=="open") node.className="close"; else node.className="open"; } //list1,2都是一个列表的情况，但是实际开发，通常一个网页中含有多个列表 function list3(index) { //这种方式中列表的位置不能调换，否则会出现展开错误列表的情况.因为Dom解析是按照列表从前到后解析的 //不安全 var node=document.getElementsByTagName("dl")[index]; if(node.className=="open") node.className="close"; else node.className="open"; } function list4(node) { //alert(node.nodeName);//得到DT var fnode=node.parentNode; if(fnode.className=="open") fnode.className="close"; else fnode.className="open"; } //在多个列表下，一次只需要展开一个列表，关闭其他开启的列表 /*思路：1，获取所有dl节点 2，遍历这些节点，只对当前的dl进行展开或者闭合操作，其他节点，都进行闭合操作 */ function list5(node) { var oDlnode=node.parentNode;//获取当前的dl节点 var collDlNodes=document.getElementsByTagName("dl"); for(var i=0;i<collDlNodes.length;i++) { if(collDlNodes[i]==oDlnode) { if(oDlnode.className=="open") oDlnode.className="close"; else oDlnode.className="open"; } else { collDlNodes[i].className="close"; } } } </script> <dl class="close"> <dt onclick="list5(this)">显示条目一</dt> <dd>展示列表内容1</dd> <dd>展示列表内容1</dd> <dd>展示列表内容1</dd> </dl> <dl class="close"> <dt onclick="list5(this)">显示条目二</dt> <dd>展示列表内容2</dd> <dd>展示列表内容2</dd> <dd>展示列表内容2</dd> </dl> <dl class="close"> <dt onclick="list5(this)">显示条目三</dt> <dd>展示列表内容3</dd> <dd>展示列表内容3</dd> <dd>展示列表内容3</dd> </dl> </body> </html>

转载请注明原文地址: https://www.6miu.com/read-58824.html

技术

最新回复(0)