1.源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>脚本控制交互元素</title></head><body><span onClick="span1_click()">脚注</span><details id="detials1">本页生成于2017年09月20日</details><script type="text/javascript">//根据属性控制内容是否显示function span1_click(){var objD = document.getElementById("detials1");var attD = objD.getAttribute("open");if(attD != "open"){objD.setAttribute("open","open");}else{objD.removeAttribute("open");}}</script></body></html>2.页面效果
2.1点击脚注前
2.2点击脚注后
在Javascript中，使用getAttribute()方法获取<details>元素的“open”属性，然后判断元素的属性值，当该值为“open”时，利用removeAttribute()方法删除<details>元素的“open”属性；反之，使用setAttribute()方法增加该属性。
【HTML5】用脚本控制交互元素details元素的使用
原文地址：http://www.cnblogs.com/OliverQin/p/7562338.html