DOM_节点操作列表操作

思路：

1、创建HTML标签

2、创建css样式

3、编写js代码获取dl节点对象

4、封装css样式

5、通过改变className属性改变css样式

<html>
<head>
    <style type="text/css">
    #div_1{
        height:32px;
        background-color:#000000;
        color:#ccff00;
        }
    dl dd{
        margin:0px;    
        padding:0px;
    }
    dl{
        height:24px;
        }
    .close{
        
        overflow:hidden;
        }
    .open{
    
    overflow:visible;    
    }
    </style>
</head>
<body>
<div id="div_1">
    <dl id="list_dl" class="close">
        <dt  onmousemove="list_on(this)" onmouseout="list_out(this)" >NBA全明星</dt>
        <dd><a href="javascript:void(0);" >詹姆斯</a></dd>
        <dd>哈登</dd>
        <dd>韦德</dd>
    </dl>
    <dl id="list_dl" class="close">
        <dt  onmousemove="list_on(this)" onmouseout="list_out(this)" >NBA全明星</dt>
        <dd>詹姆斯</dd>
        <dd>哈登</dd>
        <dd>韦德</dd>
    </dl>
    <dl id="list_dl" class="close">
        <dt  onmousemove="list_on(this)" onmouseout="list_out(this)" >NBA全明星</dt>
        <dd>詹姆斯</dd>
        <dd>哈登</dd>
        <dd>韦德</dd>
    </dl>
</div>
</body>
    <script type="text/javascript">
        function list_on(node){
            var    odlNode=node.parentNode;
            
            odlNode.className="open";
        
        }
        function list_out(node){
            var    odlNode=node.parentNode;
            
            odlNode.className="close";
            }
    </script>
</html>

<html>
<head>
    <style type="text/css">
    dl dd{
        margin:0px;    
    }
    dl{
        height:16px;
        }
    .close{
        
        overflow:hidden;
        }
    .open{
    
    overflow:visible;    
    }
    </style>
</head>
<body>
    <dl id="list_dl" class="close">
        <dt  onclick="list()" >NBA全明星</dt>
        <dd>詹姆斯</dd>
        <dd>哈登</dd>
        <dd>韦德</dd>
    </dl>
</body>
    <script type="text/javascript">
        function list(){
            var    odtNode=document.getElementById("list_dl");
            if(odtNode.className=="close"){
            odtNode.className="open";
        }else{
            odtNode.className="close";
            }
        }
        
    </script>
</html>

相关阅读:
IBM小练习
面向对象
面向对象_人狗大战
面向对象组合小练习
面向对象小作业
作业大礼包_员工信息表
异常报错处理
开发规范
包
U-boot工作流程分析

原文地址：https://www.cnblogs.com/wangyinxu/p/7126717.html