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 ...
随机推荐
- codeforces 349B Color the Fence 贪心，思维
1.codeforces 349B Color the Fence 2.链接:http://codeforces.com/problemset/problem/349/B 3.总结: 刷栅栏.1 ...
- CentOS上安装RabbitMQ3.6.X
RabbitMQ3.6.1的安装方法跟以前的版本有点不一样,我在网上找了很多资料,基本都是3.1左右的版本,而且安装过程很繁琐,所以我花了一下午 的时间研究如何实现最简安装.为了让大家少走弯路,就把安 ...
- python 之select
服务端源码 #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ @author: zengchunyun "& ...
- node.js不得不说的12点内容
1.node.js,服务器端的javascript,它允许在后端(脱离浏览器环境)运行javascript代码. 2.事件驱动.异步式I/O的编程模式(单线程)是其核心. 3.node.js的java ...
- 处理海量数据的高级排序之——希尔排序（C++）
希尔算法简介 ...
- hadoop Error: JAVA_HOME is not set and could not be found.
Hadoop安装完后,启动时报Error: JAVA_HOME is not set and could not be found.解决办法: 修改/etc/hadoop/hadoop- ...
- 使用ftp软件上传下载php文件时换行丢失bug
正 文: 在使用ftp软件上传下载php源文件时,我们偶尔会发现在本地windows下notepad++编辑器写好的php文件,在使用ftp上传到linux服务器后,php文件的换行符全部丢失了, ...
- python 处理文件夹中的文件（新建另一个文件保存），listdir顺序输出
1.原始文件
- 关于svn的使用
svn听课笔记 1. 下载并安装svn2. 将svn安装目录中bin目录添加到用户path变量中.3. 创建svn根目录svnroot4. 启动svn服务 在dos启动命令: svnserve -d ...
- 示例-创建表格-指定行列&删除表格的行和列
<body> <script type="text/javascript"> /* *上面的方法和你麻烦. *既然操作的是表格, *那么最方便的方式就是使用 ...