《HTML5 开发实例大全》——1.7 实现下拉弹出效果

xiaoxiao2024-04-09 120

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.7节,作者：张明星更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.7 实现下拉弹出效果

https://yqfile.alicdn.com/778683c054e0f6d49f9332335c48a6178fc816a6.png" > 实例说明

在本实例中，首先在页面中显示一行提问文本“需要在线咨询吗？”。当单击左侧的小三角符号后，将在下方无刷新弹出一个下拉区域，在里面显示文本“非常”需要。上述描述效果在很多动态网站中比较常见，原来一般都是用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所示。