时间戳

首页 > 解决方案 > 如何使用 CSS 显示或隐藏面板折叠的切换链接

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

问题描述

我的面板标题中有一个链接，用于控制面板主体的折叠。我还有一个适用于所有面板主体的页面宽折叠切换。所以我不能使用一个变量来定位它们。我有我的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>

标签： csstwitter-bootstrap-3

解决方案

推荐阅读