《HTML5 开发实例大全》——1.7 实现下拉弹出效果-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

简介:

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

1.7 实现下拉弹出效果


<a href=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所示。


db2e1b72a4db0c0a45fbe1ac4258733819cf11d9

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章