子菜单扩展和基于onclick的innerHTML替换，仅使用Javascript

首先，我应该提到的是，我对编码世界已经有4周的时间了，这是我第一次尝试创建一个简单的站点

我见过许多关于堆栈溢出的类似问题，但在尝试调整解决方案中提供的代码示例时，该解决方案将停止工作

因此，目前的障碍是：

• 我有一个用HTML定义的菜单，其中一个

  元素（“公文包”）中有一个子菜单，该
  元素包含字符▼ (9660)
  
  我为该
  元素设置了一个
  onclick
  事件，这样当它被单击时，它将做两件事：展开/显示它正下方的子菜单
  元素（将菜单中的其他
  元素推到更下方），并替换▼ 具有▲ 字符（▲）。。。直到再次单击
  元素以缩小/隐藏子菜单
  
  我不确定这是否重要，但是这个菜单在一个网格项目中，因为页面是使用CSS网格设置的
  

所以基本上：

• 家
• 关于我们
• 投资组合▼
• 信息
• 接触

…将成为：

• 家
• 关于我们
• 投资组合▲
  • 链接1
  • 链接2
  • 链接3
• 信息
• 接触

无论我如何设置我的类和ID，我都无法交换箭头符号，在这条线的某个地方，我弄乱了编码，现在子菜单甚至不再展开

这可能是令人尴尬的糟糕代码（考虑到我曾试图将我所看到的示例中的一些片段拼凑在一起），但以下是我所拥有的。提前谢谢

var arrowstring=document.getElementById（“arrowsdirection”）.innerHTML；
document.getElementById（“IDforPortfolioLink”）.classList.toggle（“show”）；
if（IDforPortfolioLink.classList.contains（'show'））{
箭头字符串=“▲”
}否则{
箭头字符串=“▼”
}
arrowdirection.textContent=箭头字符串；
}

。子菜单内容{
显示：无；
位置：绝对位置；
}
.子菜单内容a{
显示：块；
}
.子菜单内容a：悬停{
背景颜色：绿色；
}
.表演{
显示：块；
}

嗯，你的代码有太多缺陷，我不得不重写。 我将尽我所能解释我在这里所做的一切：

我对HTML做了一些修改：我在nav（容器）中添加了div，而不是ul和li。它更倾向于这样做，因为它保持了标记的干净，并且调试起来也不那么困难

我已分配

nav

a

display:flex；证明内容：中心；对齐项目：居中

将div集中在

nav

内，并将其内联。我使用了

nav div

，它几乎将文本放在它们的中心

我已经删除了

.portfolio

之外的所有类，因为拥有这么多类是没有用的

我使

div.expand-portfolio

成为

div.portfolio

的子项，它本身（.expand portfolio）有另一个

ul

子项，它持有链接。你可能已经注意到我添加了

.portfolio

a

位置：相对

和

。展开投资组合

a

位置：绝对。我这样做是因为，我想从文档流中提取
.expand portfolio
，这基本上意味着我想使
.expand portfolio
不与页面上的任何元素交互。现在，当分配
位置时：绝对
对于容器中的子对象，子对象的位置将是相对于文档的，而不是相对于父对象的。这就是为什么您可以添加
position:relative到父级

我创建了一个名为

.expanded

的单独类，当分配给

.expandportfolio

时，它的高度为150px

您可能还注意到，我在

nav

a

a
500 ms ease
中设置了
div
s，这样做是为了使属性之间的转换平滑，而不是突然。如果你不想要的话，你可以从他们身上移除该属性

现在是javascript

当我创建这3个变量时，您注意到我使用了
document.getElementsByClassName
后跟一个
[0]
。
document.getElementsByClassName（）
返回的是：节点列表。它基本上是一种“数组”，在附加了[0]之后，我只选择该类页面的第一个也是唯一一个元素

您可能已经注意到我在javascript文件中添加了
onclick
函数。个人偏好。我说过，当我单击公文包按钮时，首先，您应该更改span的
innerHTML
。（跨度元素包含实际符号）。我还说你应该切换
.expanded
类。我做了一个if语句，检查
.expand portfolio
是否不包含该类。如果没有，你几乎可以看到它的作用

我希望有帮助。如果您还有任何问题，请在评论中提问


var-portfolio=document.getElementsByClassName（“投资组合”）[0]；
var portfolioInner=document.getElementsByClassName（“内部html”）[0]；
var扩展