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 ...
随机推荐
- Invalid escape sequence(valid ones are \b \t \n \f \r \" \' \\)
Invalid escape sequence(valid ones are \b \t \n \f \r \" \' \\) 在运行eclipse的相关程序代码时遇到了报错信息,查看控制台 ...
- TCP连接探测中的Keepalive和心跳包
TCP连接探测中的Keepalive和心跳包 tcp keepalive 心跳 保活 Linuxtcp心跳keepalive保活1. TCP保活的必要性 1) 很多防火墙等对于空闲socket自动关闭 ...
- 使用JDK自带的visualvm进行性能监测和调优
使用JDK自带的visualvm进行性能监测和调优 1.关于VisualVm工具 VisualVM 提供在 Java 虚拟机 (Java Virutal Machine, JVM) 上运行的 J ...
- android- 菜单
选项菜单:menu_main.xml <?xml version="1.0" encoding="utf-8"?><menu xmlns:an ...
- poj1700
这题的最坑的地方就是每步可能会有两种情况,这两情况起初我都单独考虑了,但就是没放在一起考虑...wa个不停,果然贪心是一个很考验思维的东西. 这里可以这样考虑,在运人的过程中,河的起始岸最后终将剩下一 ...
- spring security动态管理资源结合自定义登录页面
如果想将动态管理资源与自定义登录页面一起使用,最简单的办法就是在数据库中将登录页面对应的权限设置为IS_AUTHENTICATED_ANONYMOUSLY. 因此在数据库中添加一条资源信息. INSE ...
- 牛人整理分享的面试知识：操作系统、计算机网络、设计模式、Linux编程，数据结构总结 转载
基础篇:操作系统.计算机网络.设计模式 一:操作系统 1. 进程的有哪几种状态,状态转换图,及导致转换的事件. 2. 进程与线程的区别. 3. 进程通信的几种方式. 4. 线程同步几种方式.(一定要会 ...
- JQ 队列
<div class="divtt"> <div class="divtest"></div> </div> & ...
- java类加载机制
使用某个类是发生的事情 加载->链接(验证.准备.解析)->初始化->可以使用 加载:将class文件字节码内容加载到内存当中,并将这些静态数据转换成方法区中的运行时数据结构 在堆中 ...
- centos6 系统优化脚本
#!/bin/bash # 检查是否为root用户,脚本必须在root权限下运行 # if [[ "$(whoami)" != "root" ]]; then ...