如何使用HTML和CSS创建一个多级手风琴菜单

步骤1：逐步安装

在MacBook或PC上打开终端窗口并运行以下命令：

用实际值替换items中的项目。

登录到Raspberry Pi

$ ssh pi@♣raspberry-pi-ip-address♣

更改到主目录

$ cd /var/www

下载index.html，并更改文件的权限和所有者

$ sudo wget “https://raw.githubusercontent.com/dumbo25/accordion-menu/master/index.html”

$ sudo chmod 774 index.html

$ sudo chown pi index.html

为图像创建目录并移至该目录

$ mkdir img

$ cd img

下载图像并更改所有者。

$ sudo wget “https://raw.githubusercontent.com/dumbo25/accordion-menu/master/tv.png”

$ sudo wget “https://raw.githubusercontent.com/dumbo25/accordion-menu/master/menu-icon.png”

$ sudo wget “https://raw.githubusercontent.com/dumbo25/accordion-menu/master/raspberry-pi.png”

$ sudo chown pi *.png

备份到主目录，然后创建css目录并移入该目录

$ cd 。.

$ mkdir css

$ cd css

下载样式表，并更改文件的权限和所有者

$ sudo wget “https://raw.githubusercontent.com/dumbo25/accordion-menu/master/style.css”

$ sudo chmod 744 style.css

$ sudo chown pi style.css

如果您没有树莓派，则可以将这些文件下载到Mac或PC。要从Mac或PC上运行菜单，请

双击index.html，或

选择index.html，右键单击并使用浏览器打开您的选择。

如果使用Raspberry Pi，则它必须正在运行Web服务器。打开PC或Mac上的浏览器，然后在URL窗口中输入：

♣raspberry-pi-ip-address♣/index.html

我的服务器需要安全连接（删除冒号周围的空间）：

https ： //♣raspberry-pi-ip-address♣/index.html

它有效！

步骤2：附录：参考

CSS脚本仅使用HTML和CSS的多级手风琴菜单

W3Schools手风琴菜单

W3Schools CSS

W3Schools HTML

步骤3：附录：更新

步骤4：附录：故障排除

以下一些想法可能会有所帮助：

要在php echo语句中格式化HTML，请添加“ \ r末尾添加回车符

子菜单的组ID必须唯一。如果子菜单的组ID不是唯一的，则其子菜单项将包含在组ID的第一个实例中
责任编辑：wv