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">
<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>
第二种方式，多个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>
<!--
思路：
：标签封装数据，
：定义样式
：明确事件源，事件，以及处理节点，dom
：明确具体操作方式
-->// 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>
<!-- :默认样式属性.close -->
<dl class="close">
<dt onclick="list2(this)">显示条目1</dt>
<dd>展开内容1.</dd>
<dd>展开内容1.</dd>
<dd>展开内容1.</dd>
<dd>展开内容1.</dd>
<dd>展开内容1.</dd>
<dd>展开内容1.</dd>
<dd>展开内容1.</dd>
</dl>
<dl class="close">
<dt onclick="list2(this)">显示条目2</dt>
<dd>展开内容2.</dd>
<dd>展开内容2.</dd>
<dd>展开内容2.</dd>
<dd>展开内容2.</dd>
<dd>展开内容2.</dd>
<dd>展开内容2.</dd>
<dd>展开内容2.</dd>
</dl>
<dl class="open">
<dt onclick="list2(this)">显示条目3</dt>
<dd>展开内容3.</dd>
<dd>展开内容3.</dd>
<dd>展开内容3.</dd>
<dd>展开内容3.</dd>
<dd>展开内容3.</dd>
<dd>展开内容3.</dd>
<dd>展开内容3.</dd>
</dl>
</body>
</html>
js_css_dl.dt实现列表展开、折叠效果的更多相关文章
- Vue 实现展开折叠效果
Vue 实现展开折叠效果 效果参见:https://segmentfault.com/q/1010000011359250/a-1020000011360185 上述链接中,大佬给除了解决方法,再次进 ...
- 展开折叠效果 height未知 transition无效
展开折叠效果,没有设置height时 transition 不起作用 可以设置max-height .default { max-height: 500px; transition: all 1000 ...
- vue多级复杂列表展开/折叠，全选/分组全选实现
首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/multipleList/.温馨提示,打开之后按F12,使用手机模式食用,口味更佳! 可以看出,这个列表有三种展现形式: ...
- 简易模仿手机拨号盘浮在ListView之上并且展开,折叠效果
2013-12-24 16:56:45 有时候可以看到很多手机会将Call log list和Dailer放在同一个页面中,同时Dialer是可以折叠.打开的,自己做了一个Demo,能实现这种效果,简 ...
- jquery 展开折叠效果
仅供参考 图片 jquery.js 自己处理 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...
- JS点击查看更多内容 控制段落文字展开折叠
JavaScript+jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能 ...
- 【转】 HVTableView创建--展开/折叠列表能 AAShareBubbles社会分享动画组
原文: http://blog.csdn.net/billfanggs/article/details/17279969 HVTableView HVTableView是UITableView(带有展 ...
- jQuery文本段落展开和折叠效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- javascript实现列表的点击展开折叠
<script> window.onload = function() { //要折叠的区域 var catalog = document.getElementById("div ...
随机推荐
- DOM的概念及子节点类型【转】
前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...
- Hadoop.2.x_简单的测试文件读取与上传
代码如下, 后备参考: package com.bigdata.hadoop.hdfs; import java.io.File; import java.io.FileInputStream; im ...
- mysqlbinglog基于即时点还原
mysqlbinlog介绍 要想从二进制日志恢复数据,你需要知道当前二进制日志文件的路径和文件名.一般可以从选项文件(即my.cnf or my.ini,取决于你的系统)中找到路径. (mysql5. ...
- zju(5)LED控制实验
1.实验目的 1.学习和掌握如何将一个驱动程序添加到Kconfig,编译到内核. 二.实验内容 1．编写EduKit-IV试验箱Linux操作系统下LED灯的驱动: 2．编写EduKit-IV试验箱L ...
- 浅谈java性能分析
浅谈java性能分析,效能分析 在老师强烈的要求下做了效能分析,对上次写过的词频统计的程序进行分析以及改进. 对于效能分析:我个人很浅显的认为就是程序的运行效率,代码的执行效率等等. java做性能测 ...
- 我的web框架设计
做了很久的web开发,学了webform和mvc自己总结了,觉得当下的构架还是有改进的可能的. 其实首先说下我的一些认识(个人认知,欢迎讨论,谢绝砸砖). 我觉得对计算机和数据的操作,本身就是一个单向 ...
- freemarker判断对象是否为空
freemarker中显示某对象使用 ${name}. 但如果name为null,freemarker就会报错.如果需要判断对象是否为空: <#if name??> …… </# ...
- 浏览器中Javascript单线程分析
线程这个特性对于一门语言环境来说是尤其重要的,在Java/C++环境下都提供了多线程API操作. 但在Javascript中据说代码执行时单线程的,大量计算的逻辑会阻塞浏览器HTML渲染,但setTi ...
- XHTML表单
1.HTML表单标记提供一套元素和属性,用来创建表单,收集网页参观者信息. 2.创建表单结构标记为<form>和</form>. 3.在<form>标记中,我们必须 ...
- js只允许输入数字
<script type="text/javascript"> $(function () { $("[ID$=_PCT]").keyup(func ...