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 ...
随机推荐
- [LintCode] Submatrix Sum 子矩阵之和
Given an integer matrix, find a submatrix where the sum of numbers is zero. Your code should return ...
- Unique Binary Search Trees
Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...
- Spring和Hibernate集成配置
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...
- 解决thinkPHP构造函数__construct导致tp方法冲突问题
我们在使用了__construct构造函数,覆盖了父类的构造函数,导致父类tp的方法无法使用,例如$this->display(),解决办法是: 在__construct函数中调用一下父类的构造 ...
- NLP Deep Learning
http://blog.csdn.net/itplus http://blog.csdn.net/zouxy09/article/details/8775360
- Android课程---Activity的跳转与传值(转自网上)
Activity跳转与传值,主要是通过Intent类来连接多个Activity,以及传递数据. Intent是Android一个很重要的类.Intent直译是“意图”,什么是意图呢?比如你想从这个 ...
- 运行WampServer时，提示Exception Exception in module wampmanager.exe at 000F15A0.解决办法
出现问题:运行WampServer时,提示Exception Exception in module wampmanager.exe at 000F15A0.解决办法 出现问题原因: ①:缺少Visu ...
- 【iCore3 双核心板】例程十三：SDIO实验——读取SD卡信息
实验指导书及代码包下载: http://pan.baidu.com/s/1hqM787E iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- inotify配合rsync实现文件同步
一.slave端rsync设置在此部署rsync服务和rsync daemon 1.安装rsync 2.配置rsyncd.conf文件#vi /etc/rsyncd.conf配置文件uid = r ...
- 并发队列ConcurrentLinkedQueue和阻塞队列LinkedBlockingQueue用法
在Java多线程应用中,队列的使用率很高,多数生产消费模型的首选数据结构就是队列(先进先出).Java提供的线程安全的Queue可以分为阻塞队列和非阻塞队列,其中阻塞队列的典型例子是BlockingQ ...