js_css_dl.dt实现列表展开、折叠效果

浏览数：31 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>展开、折叠</title>
<style type="text/css">
/*缩进：展开内容*/
dl dd {
    margin: 10px;
}
/* 指定高度：16px（16px只有一行文字高度，所以只显示一行）;指定超出部分：隐藏 */
dl {
    height: 16px;
    overflow: hidden;
}
</style>

</head>

<body>
    <!-- 
        思路：
        1：标签封装数据，
        2：定义样式
        3：明确事件源，事件，以及处理节点，dom
        4：明确具体操作方式
     -->
    <script type="text/javascript">
        //初始style是hidden;
        var isHidden=true;
        function list(){
            //获取dl节点
            var oDlNode=document.getElementById("dl0");
            if(isHidden){
                oDlNode.style.overflow="visible";
                isHidden=false;

                alert(isHidden);
            }else{
                oDlNode.style.overflow="hidden";
                isHidden=true;
            }
        }
    </script>
    <dl id="dl0">
        <dt onclick="list()">显示条目1</dt>
        <dd>展开内容1.1</dd>
        <dd>展开内容1.2</dd>
        <dd>展开内容1.3</dd>
        <dd>展开内容1.4</dd>
        <dd>展开内容1.1</dd>
        <dd>展开内容1.2</dd>
        <dd>展开内容1.3</dd>
    </dl>
</body>
</html>