Javascript 通过overflow控制列表闭合展开

最新推荐文章于 2019-08-31 15:01:11 发布
最新推荐文章于 2019-08-31 15:01:11 发布
阅读量1.5k 收藏
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/limlimlim/article/details/8542855
版权

<!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>
    <title>通过overflow控制列表闭合展开</title>
    <style type="text/css">
        div dl
        {
            margin:0;
            padding:0;
            font-size:14px;
        }
        #divMain
        {
            width:500px;
            background-color:#22477A;
            margin:0 auto;
            margin-top:30px;
        }
        dl
        {
            width:200px;
            background:#A6BCE5;
            height:14px;             /*和字体大小一样高*/
            overflow:hidden;         /*默认溢出隐藏*/
        }
        dt
        {
            cursor:pointer;      /*设置手型光标*/
            font-weight:bold;
            color:Green;
        }
        .open
        {
            height:112px;
            overflow:visible;
        }
        .close
        {
            height:14px;             /*和字体大小一样高*/
            overflow:hidden;
        }
    </style>
    <script type="text/javascript">
        function DisplayList() {
            var dtNode = window.event.srcElement;
            var dlNode = dtNode.parentNode;

            var dlNodes = document.getElementsByTagName("dl");
            for (var i = 0; i < dlNodes.length; i++) {
                if (dlNodes[i] == dlNode) {       //判断是否是当前点击的dl
                    if (dlNodes[i].className == "open") {
                        dlNodes[i].className = "close";
                    }
                    else {
                        dlNodes[i].className = "open";
                    }
                }
                else {
                    dlNodes[i].className = "close";
                }
            }
        }
    </script>
</head>
<body>
    <div id="divMain">
        <dl>
            <dt οnclick="DisplayList()">
                球星列表1
            </dt>
            <dd>罗纳尔多</dd>
            <dd>贝克汉姆</dd>
            <dd>齐达内</dd>
            <dd>内马尔</dd>
            <dd>巴蒂斯图塔</dd>
            <dd>梅西</dd>
        </dl>
        <br />
        <dl>
            <dt οnclick="DisplayList()">
                球星列表2
            </dt>
            <dd>罗纳尔多</dd>
            <dd>贝克汉姆</dd>
            <dd>齐达内</dd>
            <dd>内马尔</dd>
            <dd>巴蒂斯图塔</dd>
            <dd>梅西</dd>
        </dl>
        <br />
        <dl>
            <dt οnclick="DisplayList()">
                球星列表3
            </dt>
            <dd>罗纳尔多</dd>
            <dd>贝克汉姆</dd>
            <dd>齐达内</dd>
            <dd>内马尔</dd>
            <dd>巴蒂斯图塔</dd>
            <dd>梅西</dd>
        </dl>
        <br />
        <dl>
            <dt οnclick="DisplayList()">
                球星列表4
            </dt>
            <dd>罗纳尔多</dd>
            <dd>贝克汉姆</dd>
            <dd>齐达内</dd>
            <dd>内马尔</dd>
            <dd>巴蒂斯图塔</dd>
            <dd>梅西</dd>
        </dl>
        <br />
        <dl>
            <dt οnclick="DisplayList()">
                球星列表5
            </dt>
            <dd>罗纳尔多</dd>
            <dd>贝克汉姆</dd>
            <dd>齐达内</dd>
            <dd>内马尔</dd>
            <dd>巴蒂斯图塔</dd>
            <dd>梅西</dd>
        </dl>
        <br />
        <dl>
            <dt οnclick="DisplayList()">
                球星列表6
            </dt>
            <dd>罗纳尔多</dd>
            <dd>贝克汉姆</dd>
            <dd>齐达内</dd>
            <dd>内马尔</dd>
            <dd>巴蒂斯图塔</dd>
            <dd>梅西</dd>
        </dl>
    </div>
</body>
</html>

永远爱好写程序
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js锚点定位_overflow属性详解，利用CSS实现锚点定位
weixin_39612677的博客
11-29 1432
1.overflow的裁剪界线——border-boxoverflow属性用于指定块容器元素的内容溢出时的表现方式——滚动，裁剪，自适应。“BFC的最佳结界”只是其衍生出来的特性，“裁剪”才是其本职工作。在使用overflow做裁剪工作的时候需要注意裁剪的边界时border box的内边缘，来看下面的例子。<div style="width: 200px;height: 200px;over...
DOM11---展开闭合列表01
奋斗、
05-31 991
只有一个展开列表的情况 /*把dd中的缩近取消为0*/ dl dd{ margin:0px; } dl{ height:16px; overflow:hidden; } <!-- 思路： 1、标签封装数据，html 2、定义样式css 3、明确事件源，事件，以及要处
DOM13---展开闭合列表03
奋斗、
05-31 849
只展开当前节点，关闭其它节点 /*把dd中的缩近取消为0*/ dl dd{ margin:0px; } dl{ height:16px; } /*预定义一些样式，类选择器，便于动态加载*/ .open{ overflow:visible; } .close{ overflow:hidd
DOM（二）-05-(示例-展开闭合列表3)
wy_0928的博客
08-20 369
<!-- 新需求：在多个列表下，一次只能展开一个，当展开另一个时候，前一个被自动关闭 （如先展开列表一，立马点开列表二，此时列表一被自动关闭） --> <!-- 思路： 1.获取所有dl节点 2.遍历这些节点，只对当前的dl进行展开或闭合操作，其他节点都进行闭合操作。 --> dl dd{ margin:0px; } dl{ height:16px;
（7）展开闭合列表：布局overflow在列表中应用
FixedStar 的博客
08-06 360
.open {
【javascript】多个列表dl 的开关以及闭合
11-28 1333
function list(dtNode){ /* var dtNode = event.srcElement; //基于事件源驱动 var dlNode = dtNode.parentNode; */ var dlNode = dtNode.parentNode; // 事件源对象通过this传入 if(dlNode.className=="open"){ dlNode.c
Javascript通过overflow控制列表闭合与展开的方法
10-24
DisplayList()">球星列表5</dt> 罗纳尔多</dd> 贝克汉姆</dd> 齐达内</dd> 内马尔</dd> 巴蒂斯图塔</dd> 梅西</dd></dl></div></body>上述代码展示了一个使用JavaScript和CSS通过`overflow`属性控制列表闭合与展开的...
JavaScript内部测试-笔试试题和答案.doc
11-13
JavaScript内部测试-笔试试题和答案.doc 本资源提供了 JavaScript 内部测试的笔试试题和答案，涵盖了 HTML、CSS、JavaScript 等多个方面的知识点。下面将对每个问题进行详细的解释和分析： 1. 关于 XHTML 1.0 规定...
JavaScript内部测试-笔试试题和标准答案.doc
09-30
3. XHTML 使用规范：XHTML要求所有标签必须闭合，因此，正确的代码片段是 `<img src="title.jpg" alt="Welcome">` 和 `<hr />`。 4. 设置外边距：CSS中，设置左外边距为5像素的正确方式是 `margin: 0 0 0 5px;` 或 ...
基于JavaScript canvas绘制贝塞尔曲线
01-19
简单描述：页面上有四个点，鼠标拖动四个点的位置来改变贝塞尔曲线的形状，... html{overflow: hidden;} * {padding: 0;margin: 0;} #box {background-color: #000000;} .point { width: 20px; height: 20px; ba
overflow的处理详解
ChocooM
12-17 2656
按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？ 　　有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通...
javascript设置overflow-y
爱读书的旅行者
09-18 1万+
css里可以设置overflow-y:scroll 但是javascript中应这样设置 overflowY:scroll 比如，显示博文的时候超过规定高度就让其显示滚动条，代码如下 $(function(){     var height = document.getE
【DOM】展开闭合列表示例
你今天真好看呀
08-31 339
1.标签封装数据 2.定义样式 3.明确事件源和事件 4.明确具体的操作方式，就是事件的处理内容 <html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*为dl下面的dd标签设置...
easyui ----layout布局使用js修改其尺寸
Sun_xiangyan的博客
06-24 1035
$('#left-context').panel('resize', { width: 200,height:300 });//修改其尺寸 $('#ui-layout').layout();//刷新显示 附Easyui 详细解释网页：http://www.jeasyui.net/p...
jquery easyui滚动条部分设置
阳光之线
09-12 3459
在使用dialog插件时，默认是屏幕居中的，但是当页面出现滚动条时，dialog并没有随着滚动条往下滚动，这时就需要用户滑动滚动条来定位dialog，这不人性化，在说出解决方案前先来普及一下jquery关于定位的几个方法 [javascript] view plaincopy //获取浏览器显示区域的高度    $(window).
javascript 动态设置样式style
热门推荐
limlimlim的专栏
12-25 2万+
动态修改style 1.易错:修改元素的样式不是设置class属性，而是className属性. 2.易错:单独修改样式的属性使用"style.属性名".注意在css中属性名在javascript中    操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为    javascript中-是不能做属性，类名的。所以在CSS中背景色是background-clolor,
javascript createElement的两种方式
limlimlim的专栏
12-27 9153
http://www.w3.org/1999/xhtml">     CreateElement的两种创建方式             function CreateButton1() {             var btn = document.createElement("input");             btn.type = "button";
通过JavaScript来控制overflow:auto滚动条的位置到盒子顶部
最新发布
09-21
通过JavaScript来控制一个带有"overflow:auto"样式的盒子的滚动条位置到顶部，可以使用盒子的scrollTop属性。这个属性返回盒子顶部已经滚动过的像素值。 首先，我们需要获取到要控制滚动条位置的盒子元素，可以通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值