您的位置首页生活百科

如何使用HTML5中details和summary元素显示菜单

如何使用HTML5中details和summary元素显示菜单

的有关信息介绍如下:

如何使用HTML5中details和summary元素显示菜单

在HTML5中,新增了detail和summary元素,可以用来标识元素内部的子元素展开或收缩显示。下面利用实例说明:

第一步,打开HBuilder开发工具,新建页面文件,并打开修改title标题

第二步,在body标签中,插入details元素和summary元素

第三步,保存代码并运行页面文件,打开浏览器并查看效果

第四步,点击左侧的三角图标,可以展开或收缩起来

第五步,在details元素中,添加ontoggle事件;p标签添加id属性

第六步,在script标签中,定义事件函数showHide,传入参数obj;然后再次查看效果