1.7 实现下拉弹出效果
实例说明
在本实例中，首先在页面中显示一行提问文本“需要在线咨询吗？”。当单击左侧的小三角符号后，将在下方无刷新弹出一个下拉区域，在里面显示文本“非常”需要。上述描述效果在很多动态网站中比较常见，原来一般都是用JavaScript技术或Ajax技术实现的。但现在只需使用HTML 5中的< details >标记元素即可实现完全同样的功能。
具体实现
使用Dreamweaver创建一个名为“007.html”的文件，具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>脚本控制交互元素<details></title>
<style type="text/css">
body { font-family: sans-serif; }
details {
overflow: hidden;
background: #e3e3e3;
margin-bottom: 10px;
display: block;
}
details summary {
cursor: pointer;
padding: 10px;
}
details div {
float: left;
width: 65%;
}
details div h3 { margin-top: 0; }
details img {
float: left;
width: 200px;
padding: 0 30px 10px 10px;
}
</style>
</head>
<body>
<details>
<summary>需要在线咨询吗?</summary>
<p>非常需要.</p>
</details>
</body>
</html>
在上述代码中，当需要显示和隐藏内容时，使用< details >元素包括一个summary标签，接着是内容。当单击summary标签时，内容标签会以切换的样式显示。另外，在上述CSS代码中，用百分比表示宽度pointer的设置，主元素用margin-bottom区分下面的内部元素，用padding来做间隔。执行后的效果如图1-12所示，单击文字左侧的小三角形符号后，在下方无刷新弹出一个新的区域，如图1-13所示。
时间： 2024-08-04 11:12:25