3.3.2  实现下拉弹出效果

3.3.2 实现下拉弹出效果

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

下面将讲解使用<details>标记实现下拉弹出效果的方法。

实例文件4.html的具体代码如下。

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

图3-5 初始效果

图3-6 无刷新弹出新内容