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

1.7 实现下拉弹出效果

https://yqfile.alicdn.com/778683c054e0f6d49f9332335c48a6178fc816a6.png" >

在本实例中，首先在页面中显示一行提问文本“需要在线咨询吗？”。当单击左侧的小三角符号后，将在下方无刷新弹出一个下拉区域，在里面显示文本“非常”需要。上述描述效果在很多动态网站中比较常见，原来一般都是用JavaScript技术或Ajax技术实现的。但现在只需使用HTML 5中的< details >标记元素即可实现完全同样的功能。

具体实现

使用Dreamweaver创建一个名为“007.html”的文件，具体代码如下所示：

    
    
     
需要在线咨询吗?
     
非常需要.
    

在上述代码中，当需要显示和隐藏内容时，使用< details >元素包括一个summary标签，接着是内容。当单击summary标签时，内容标签会以切换的样式显示。另外，在上述CSS代码中，用百分比表示宽度pointer的设置，主元素用margin-bottom区分下面的内部元素，用padding来做间隔。执行后的效果如图1-12所示，单击文字左侧的小三角形符号后，在下方无刷新弹出一个新的区域，如图1-13所示。