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是否还有市场

相关内容

热门资讯

德国总理：美国正在被伊朗羞辱 德国之声4月27日报道，德国总理默茨在访问一所学校时表示，在当前的持续冲突中，伊朗领导层正试图羞辱美...
理响中国｜“长”歌以行，风云激... 光阴如梭，东方潮阔。这里是中国的长三角，世界的长三角。无论过去、现在还是未来，这片土地都因时代而生，...
白宫：特朗普及其国安团队开会讨... 新华社华盛顿4月27日电 美国白宫新闻秘书莱维特27日在记者会上证实，总统特朗普及其国家安全团队当天...
人民日报刊文：日本放开杀伤性武... 日本放开杀伤性武器出口推高地缘冲突风险（国际论坛）常思纯《人民日报》（2026年04月28日 第 0...
医疗保障法草案二审：明确生育保... 满足多样化健康保障需求本报记者 彭 波4月27日，医疗保障法草案二审稿提请十四届全国人大常委会第二十...
天津一景区发生自转旋翼机事故1... 澎湃新闻记者 吕新文中国民用航空华北地区管理局4月22日公布《豪客通航“10•1”天津长芦汉盐旅游区...
卡塔尔埃米尔与美国总统特朗普通... 当地时间24日，卡塔尔埃米尔塔米姆与美国总统特朗普通电话，重点就中东地区局势以及伊朗与美国谈判问题交...
男子30年前被扣押2859克黄... 澎湃新闻记者 王鑫家住辽宁省大连市的潘永嘉近日向澎湃新闻反映称，三十年前，他在大连周水子机场被盖州市...
商务部：取消反制欧盟两家金融机... 中华人民共和国商务部令二〇二六年 第1号鉴于欧盟已取消对中国两家金融机构的制裁措施，现公布《关于取消...
过去24小时共有5艘船只通过霍... 总台记者当地时间24日获悉，过去24小时内，共有5艘船只通过霍尔木兹海峡，其中包括一艘伊朗油轮。（总...