我是Angular的新手，我正在使用Bootstrap实现一个包含子菜单的垂直菜单的侧边栏。我可以通过单击箭头图标来切换浏览器内容的可见性。当箭头指向下时，显示箭头，当箭头指向右时，隐藏箭头。所以一开始箭头应该指向右边。如果单击该节点，则会展开该节点，箭头将指向右侧。
问题是当应用程序加载时，箭头指向下，而它们应该指向右边。
使用的示例：https://www.codeply.com/p/Nkp8O77PFS
- 自定义编码：*
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-blue">
<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
<a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<span class="fs-5 d-none d-sm-inline">Logs</span>
</a>
<ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
<li class="nav-item">
<a href="#" class="nav-link align-middle px-0">
<i class="fs-4 bi-house"></i> <span class="ms-1 d-none d-sm-inline">Home</span>
</a>
</li>
<li>
<a href="#submenu1" data-bs-toggle="collapse" class="nav-link px-0 align-middle ">
<i class="fs-4 bi-bootstrap"></i> <span class="ms-1 d-none d-sm-inline">Logs </span></a>
<ul class="collapse nav flex-column ms-1" id="submenu1" data-bs-parent="#menu">
<li class="w-100">
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Dashboard</span></a>
</li>
<li>
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">History</span></a>
</li>
</ul>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-4 bi-table"></i> <span class="ms-1 d-none d-sm-inline">Actions</span></a>
</li>
<li>
<a href="#submenu3" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
<i class="fs-4 bi-grid"></i> <span class="ms-1 d-none d-sm inline">Products</span> </a>
<ul class="collapse nav flex-column ms-1" id="submenu3" data-bs-parent="#menu">
<li class="w-100">
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 1</a>
</li>
<li>
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 2</a>
</li>
<li>
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 3</a>
</li>
<li>
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 4</a>
</li>
</ul>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-4 bi-people"></i> <span class="ms-1 d-none d-sm-inline">Customers</span> </a>
</li>
</ul>
<hr>
</div>
</div>
</div>
</div>- CSS样式：*
.nav-link[data-bs-toggle].collapsed:after { //Initially collapsed item so arrow right
content: url(../../assets/images/chevron-right.svg);
color: white !important;
}
.nav-link[data-bs-toggle]:not(.collapsed):after { //Not collapsed item so arrow down
content: url(../../assets/images/chevron-down.svg);
color: white !important;
}初始错误结果：*
初始预期结果：*
- 点击箭头展开节点：*
答：问题只存在于最初阶段。
1条答案
按热度按时间vh0rcniy1#
问题是第一个CSS选择器永远不会被触发，因为类
collapsed最初并不存在，在元素真正被切换之前。因此，将类
collapsed添加到具有子菜单的元素中，这将使第一个选择器在初始加载时按预期工作：我已经修改了你的代码，使其在这里可重现：