如何使用CSS显示或隐藏面板折叠的切换链接

Question

我的面板标题中有一个链接，用于控制面板体的折叠。我还为所有面板体提供了一个页面宽度折叠切换。所以我不能使用一个变量来定位它们。我有我的CSS设置来隐藏这样的合适箭头......

div[aria-expanded="false"] + .panel-heading .fa-angle-up {
    display: none;
}
div[aria-expanded="true"] + .panel-heading .fa-angle-down{
    display: none;
}

这可以正常隐藏或显示基于面板主体是否折叠的向上或向下箭头。但是，它不适用于初始页面加载，只有在单击切换后，它才能从该点开始工作。这是为什么？

这是html：

<div class="panel-heading">
    <a data-toggle="collapse" data-target="#myPanel">
        <i class="fas fa-angle-down"></i>
        <i class="fas fa-angle-up"></i>
    </a>
</div>
 <div id="myPanel" class="panel-body collapse in" aria-expanded="true">
    Test
 </div>