当 <details> 元素在打开或关闭时执行 JavaScript:
<!DOCTYPE html> <html> <head> <title>HTML ontoggle 事件属性的使用(菜鸟教程 (cainiaojc.com))</title> <style> div { background: yellow; border: 1px solid #cccccc; padding: 10px; } </style> </head> <body> <p>Open the details.</p> <details ontoggle="myFunction()"> <summary>Copyright 1999-2019.</summary> <p> - 版权所有.</p> <p>详细的内容和段落在这里展示..</p> </details> <p><strong>Note:</strong> ontoggle事件属性支持 Chrome, Safari 6+, and Opera 15+.</p> <script> function myFunction() { alert("ontoggle 事件触发"); } </script> </body> </html>测试看看 ‹/›
当用户打开或关闭<details>元素时,会触发onggle属性。
<details>元素指定用户可以按需查看或隐藏的其他详细信息。
IEFirefoxOperaChromeSafari
在HTML5中,ontoggle 属性是新增的。
<element ontoggle="script">
值 | 描述 |
---|---|
script | 脚本在 ontoggle 中执行 |
支持的 HTML 标签: | <details> |
---|
HTML DOM 参考手册: ontoggle 事件