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 ...
随机推荐
- RSA_RSA算法原理（一）
如果你问我,哪一种算法最重要?我可能会回答"公钥加密算法". 因为它是计算机通信安全的基石,保证了加密数据不会被破解.你可以想象一下,信用卡交易被破解的后果. 进入正题之前,我先简 ...
- HTML 插入视频
HTML 5 video 视频标签全属性详解 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.C ...
- java web(二) Tomcat数据源
一.数据源的产生 1.JDBC操作原理 (1) 加载数据库驱动程序(数据库驱动程序可通过classpath配置): Class.forName(); (2)通过DriverManager类取得数据库连 ...
- oauth2.0了解
http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html
- bzoj1857: [Scoi2010]传送带--三分套三分
三分套三分模板 貌似只要是单峰函数就可以用三分求解 #include<stdio.h> #include<string.h> #include<algorithm> ...
- jenkins使用deploy-plugin自动构建部署war包
jenkins+ant+maven+tomcat 1安装 jenkins 使用yum安装的 # 下载库 wget -O /etc/yum.repos.d/jenkins.repo http://pkg ...
- iOS Assertion failure in -[UITableView _configureCellForDisplay:forIndexPath:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-3512.30.14/UITableView.m:7962
Assertion failure in -[UITableView _configureCellForDisplay:forIndexPath:], /BuildRoot/Library/Cac ...
- service mysql start出错，mysql启动不了，解决mysql: unrecognized service错误
service mysql start出错,mysql启动不了,解决mysql: unrecognized service错误的方法如下: [root@ctohome.com ~]# service ...
- 将CachedRowSet中的数据转储到对象中
虽然还有很多bug,但凑合能用,就是将CachedRowSet中的数据转换成对象或List.省去了繁琐难看的一系列get/set方法. 先说调用: 注: cachedRowSet是查询的结果集 Stu ...
- Unity3D 开发 之 加载Android应用的环境
(1)下载安装JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html (2)下载安装Android SDK:htt ...