侧面板导航 - 如何使用箭头折叠和展开？答案

【问题标题】：Side Panel Nav - How to Collapse and Expand with Arrow?侧面板导航 - 如何使用箭头折叠和展开？
【发布时间】：2020-06-05 12:22:15
【问题描述】：

想知道如何通过折叠和展开侧面板导航来实现与 Google 地图中相同的效果。单击箭头时，侧面板导航会展开，并且箭头会随之移动。请参阅随附的屏幕截图。

崩溃

展开

【问题讨论】：

你尝试了什么？
w3schools.com/howto/…

标签： javascript html css

【解决方案1】：

w3schools 在侧导航上有一个易于理解的教程。 Check it out here!

【讨论】：

【解决方案2】：

我认为这是您需要的类似问题。你可以参考 This answer

对于箭头按钮，您可以进行一些修改，例如：

Javascript

 var toggleBtn = element.children[0]
 if(toggleBtn.classList.contains("fa-caret-right")) {
  toggleBtn.classList.add("fa-caret-left");
  toggleBtn.classList.remove("fa-caret-right");
  } else {
  toggleBtn.classList.add("fa-caret-right");
  toggleBtn.classList.remove("fa-caret-left");
}

HTML

<a onclick="growDiv(this)" id="more-button"><i class="fa fa-caret-right" ></i></a>

Demo

【讨论】：