把Wordpress垂直Nav转换成手风琴？

Question

我有一个导航，我创建了选择“垂直导航”在Wordpress使用海狸生成器。我在网站上工作，你可以在哪里看到它的行动。

最上面的项目是一个图标，有一堆子菜单和子菜单.我需要把所有这些都转换成手风琴而不是下拉。下面简单的代码来说明加法图像。

​

<ul>
<li class="dropdown-menu">Icon
<ul class="sub-menu">
     <li class="need-accordion-sub-menu">More Submenus</li>
     <li class="need-accordion-sub-menu">More Submenus</li>
     <li class="need-accordion-sub-menu">More Submenus</li>
</ul>
</li>
<li>Inquire</li>
<li>Give</li>
<li>Visit</li>
</ul>

​

我怎样才能做到这一点？我已经玩了两个星期了，只成功地得了偏头痛。见下面的图片。

如果我是从零开始做这件事，而不是在Wordpress，我想我会没事的。但是，我找不到要覆盖的CSS。如果有人能给我一些提示的话，我很乐意做这件事。

谢谢你能帮我的忙。

我有这个：

我需要这个：

​

Answer 1

为了使导航栏中的给定子菜单能够正确地实现手风琴功能，请使用本页中找到的三个手风琴示例中的一个部分的代码：https://getbootstrap.com/docs/5.0/components/accordion/。

活生生的例子继续每一段代码。一旦您下载了用于引导的js和CSS文件到您的环境中(在这里可以找到https://getbootstrap.com/docs/5.0/getting-started/download/ )，那么您就可以将首选的html示例代码复制到您的IDE中，然后运行您保存的html页面，以便查看完全工作的示例。

您将看到引导带使用带有类和ID的标记，以便在示例html代码中创建手风琴特性。div信息全部引用引导javascript，其中所有的操作/事件都被管理，以便允许成品(即移动子菜单)。

一旦可以运行示例代码，就可以将示例代码与html代码合并，以实现目标。为此，我建议创建一个临时文件，允许您更改代码，而不会意外地破坏原始文件。这假设您还没有使用git存储库。

谢谢。