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

最新推荐文章于 2021-05-31 05:42:08 发布

weixin_30488313

最新推荐文章于 2021-05-31 05:42:08 发布

阅读量353

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/zjsy/p/4446545.html

版权

第一种方式：不提倡

<!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 οnclick="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>

第二种方式，多个dl有问题

<!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">
/* 02 */
/*缩进：展开内容*/
dl dd {
    margin: 10px;
}
/* 指定高度：16px（16px只有一行文字高度，所以只显示一行）;指定超出部分：隐藏 */
dl {
    height: 16px;
}

/* 03：预定义样式 */
.open {
    overflow: visible;
}

.close {
    overflow: hidden;
}
</style>

</head>

<body>
    <!-- 
        思路：
        1：标签封装数据，
        2：定义样式
        3：明确事件源，事件，以及处理节点，dom
        4：明确具体操作方式
     -->//         4.1
        //降低js和css的耦合，调用预定义样式,传入当前节点对象
        function list2(node) {
            //为了操作dl，从dt获得dl
            var oDlNode =node.parentNode;
            //             oDlNode.className="close";
            if (oDlNode.className == "close") {
                oDlNode.className = "open";
            } else {
                oDlNode.className = "close";
            }
        }
    </script>
    <!-- 01:默认样式属性.close -->
    <dl class="close">
        <dt οnclick="list2(this)">显示条目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>
    <dl class="close">
        <dt οnclick="list2(this)">显示条目2</dt>
        <dd>展开内容2.1</dd>
        <dd>展开内容2.2</dd>
        <dd>展开内容2.3</dd>
        <dd>展开内容2.4</dd>
        <dd>展开内容2.1</dd>
        <dd>展开内容2.2</dd>
        <dd>展开内容2.3</dd>
    </dl>
    <dl class="open">
        <dt οnclick="list2(this)">显示条目3</dt>
        <dd>展开内容3.1</dd>
        <dd>展开内容3.2</dd>
        <dd>展开内容3.3</dd>
        <dd>展开内容3.4</dd>
        <dd>展开内容3.1</dd>
        <dd>展开内容3.2</dd>
        <dd>展开内容3.3</dd>
    </dl>
</body>
</html>

转载于:https://www.cnblogs.com/zjsy/p/4446545.html

weixin_30488313

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js_css_dl.dt实现列表展开、折叠效果

第一种方式：不提倡<!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"><he...
复制链接

扫一扫