温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

html5 的 details 标记 ,summary标记,

发布时间:2020-03-02 14:34:02 来源:网络 阅读:461 作者:爱笑嘚蛋蛋 栏目:移动开发

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

<header>导航</header>
	<nav>菜单</nav>
	<article>内容</article>
	<footer>
		隐藏脚注
		<details>页面生成于2015-7-9</details><br/>
		显示脚注
		<details open="open">
			<summary>页面说明:</summary>
			页面生成于2015/7/9
			summary是对details的详细说明
		</details>
		<span onClick="span1_click()">js脚本控制交互元素的使用脚注</span>
		<details id="details1">本页面生成时间:2015-7-9 11:27</details>
		<script type="text/javascript">
			function span1_click(){
				var objD = document.getElementById("details1");
				var attD = objD.getAttribute("open");
				
				if(attD != "open"){
					objD.setAttribute("open","open");
				}else{
					objD.removeAttribute("open");
				}
			}
		</script>
	</footer>

通用的css样式的实现:

<style type="text/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;
}
</style>


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI