html5 的 details 标记 ，summary标记，
admin
2023-01-30 01:04:36
0次

html5的新加的标签：details的用法,两种方式的介绍，一种是直接css的实现，一种是js+css的实现。

导航

	
	
内容

	

		隐藏脚注
		
页面生成于2015-7-9


		显示脚注
		
			页面说明：
			页面生成于2015/7/9
			summary是对details的详细说明
		
		js脚本控制交互元素的使用脚注
		本页面生成时间：2015-7-9 11:27
		
			function span1_click(){
				var objD = document.getElementById("details1");
				var attD = objD.getAttribute("open");
				
				if(attD != "open"){
					objD.setAttribute("open","open");
				}else{
					objD.removeAttribute("open");
				}
			}

通用的css样式的实现：


header, nav, article,footer{
	border:1px solid #666;
	padding:5px;
}
header{
	width:500px;
}
nav{
	float:left;
	width:60px;
	height:100px;
}
article{
	float:left;
	width:428px;
	height:100px;
}
footer{
	clear:both;
	width:500px;
}
details{
	overflow:hidden;
	height:0px;
	padding-left:200px;
	position:relative;
	display:block;
}
details[open]{
	height:auto;
}
span{
	cursor:pointer;
}


上一篇：html5开发移动混合App系列2-开发环境搭建(windo

下一篇：HTML5来到，原生Native APP是否还有市场

相关内容

热门资讯

平均每天减少22所小学，会带来... 学龄人口收缩将是长期趋势，这为教育发展目标从“规模满足”转向“质量提升”打开了窗口文｜《财经》记者 ...
“机车”的民进党怕的不是车，是... 【文/观察者网专栏作者 甘向泰】近日，一则消息在海峡两岸炸开：张雪机车董事长张雪日前接受媒体采访时表...
以媒：美国通知以方将扩大对伊袭... 【环球网报道】据《以色列时报》、《新消息报》网站等以媒22日报道，美国已通知以色列，计划扩大对伊朗的...
毒油案发22天才启动事故调查，... 海峡导报综合报道 台当局卫生主管部门负责人石崇良21日公布“中联油脂”30批预防性下架油品样本检验结...
特朗普再威胁，伊朗各方回应 当地时间7月22日，伊朗外交部长阿拉格齐在社交平台上发文表示，伊朗的防御原则非常明确：以眼还眼。他写...
男子拍台球助教臀部被拘留，称对... 近日，据《1818黄金眼》报道，浙江杭州一男子洪先生因在台球俱乐部拍打女助教臀部，被警方认定构成猥亵...
【正片首发】麦田里，当河南坠子... 您的浏览器不支持 video 标签。当麦田里的守望者遇见麦田里的歌唱者，当河南坠子、宋词吟唱、摇滚回...
宗馥莉再次败诉！律师解读：香港... 作者：刘婷宗馥莉围绕18亿美元资产的第三次努力，还是没能成功。7月21日，香港高等法院就娃哈哈集团创...
德国人还在纠结打孔？中国制造已... 近5年来，持续高温不断刷新德国人对夏季气候的认知。“与记忆中的德国相比，如今夏天更热，高温天气也更常...
特朗普第三度通谍伊朗，红线划到... 前一天刚刚宣称“赢麻了”的美国总统特朗普，22日突然通过社交媒体向伊朗强硬喊话。“即刻起，只要伊朗伊...