Untitled Document
<script type="text/javascript">
var flag = true;
//列表展开闭合效果。
function list2(){
/*
* 思路:
* 1,无非就是将dl属性的overflow的值改成visible即可。
* 2,要先获取dl节点。
* 3,改变该节点的style.overflow的属性。
*/
//1,获取dl节点。
var oDlNode = document.getElementsByTagName("dl")[0];
//2,修改style样式属性中的overflow属性值。
// oDlNode.style.overflow = "visible";
if(flag){
oDlNode.style.overflow = "visible";
flag = false;
}else{
oDlNode.style.overflow = "hidden";
flag = true;
}
}
//重新定义list。降低js和css的耦合性。
function list3(node){
// alert(node.nodeName);//dt
//1,获取dl节点。
// var oDlNode = document.getElementsByTagName("dl")[0];
var oDlNode = node.parentNode;
// alert(oDlNode.nodeName);
//2,设置dl的className属性值。
// oDlNode.className = "open";
if(oDlNode.className == "close"){
oDlNode.className = "open";
}else{
oDlNode.className = "close";
}
}
/*
* 在多个列表下,一次只需要展开一个列表其他列表都关闭。
* 怎么保证开一个,而关其他呢?
* 思路:
* 1,获取所有的dl节点。
* 2,遍历这些节点,只对当前的dl进行展开或者闭合操作,其他节点都进行闭合操作。
*/
function list(node){
//获取对当前的dl节点。
var oDlNode = node.parentNode;
//获取所有的dl节点。
var collDlNodes = document.getElementsByTagName("dl");
//遍历所有dl。
for(var x=0; x
显示条目一
展开列表内容1
展开列表内容1
展开列表内容1
展开列表内容1
显示条目二
-
展开列表内容2
-
展开列表内容2
-
展开列表内容2
-
展开列表内容2
显示条目三
-
展开列表内容3
-
展开列表内容3
-
展开列表内容3
-
展开列表内容3
列表的展开与闭合
最新推荐文章于 2023-06-08 08:13:23 发布