【发布时间】：2021-09-28 03:44:27
【问题描述】：
我正在使用 Bootstrap 折叠来实现带有子菜单的垂直菜单。我可以通过单击字体真棒箭头图标来切换子菜单内容的可见性。箭头向下时显示子菜单，向上时隐藏。
一切正常，除非我希望最初扩展所有子菜单。箭头应该指向上方时却指向下方。
我的代码：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/d45e7e578e.js" crossorigin="anonymous"></script>
<ul class="mymenu nav flex-column">
<li class="nav-item">
<a class="nav-link collapsed" href="#submenu1" data-toggle="collapse" data-target="#submenu1">
<span>Menu Item</span>
</a>
<div class="collapse show" id="submenu1" aria-expanded="true">
<ul class="flex-column nav">
<li class="nav-item">
<a class="nav-link py-0" href="#">
<span>Submenu Item</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="#">
<span>Submenu Item</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link collapsed" href="#submenu2" data-toggle="collapse" data-target="#submenu2">
<span>Menu Item</span>
</a>
<div class="collapse show" id="submenu2" aria-expanded="true">
<ul class="flex-column nav">
<li class="nav-item">
<a class="nav-link py-0" href="#">
<span>Submenu Item</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="#">
<span>Submenu Item</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
CSS：
.nav-item{
position: relative;
}
.nav-link[data-toggle].collapsed:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f078";
color: #444444;
position: absolute;
right: 10px;
}
.nav-link[data-toggle]:not(.collapsed):after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f077";
color: #444444;
position: absolute;
right: 10px;
}
任何建议将不胜感激
【问题讨论】：
标签： html css twitter-bootstrap