引導卡崩潰無法正常作業

我正在使用引導折疊功能來顯示/隱藏一些統計資料，像魅力一樣打開，但是在關閉時，它沒有影片并且箭頭不會向下轉。我錯過了什么？

<div class="columna"> 
    <section class="stadisticCard">     
        <div class="card chart-card">
            <div class="card-body pb-0">
            <h5 class="card-title font-weight-bold">Amount of food wasted each season in Spain</h5>
            <p class="card-text float-left">Spanish Government ? 2020</p>
                <div class="float-right">
                    <button class="botonExpandir collapsed" type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">
                        <i class="bi bi-arrow-up-circle"></i>
                    </button>
                </div>
            </div>
            <div class="collapse multi-collapse" id="multiCollapseExample1">
                <div class="card-body">
                    
                    <ul class="nav nav-tabs nav-fill mb-3" id="pills-tab1" role="tablist">
                        <li class="nav-item  ms-0" role="presentation">
                        <a class="linkStadisticas nav-link active" id="pills-home-tab1" data-toggle="pill" href="#pills-home1" role="tab" aria-controls="pills-home1" aria-selected="true">Statistics</a>
                        </li>
                        <li class="nav-item">
                        <a class="linkStadisticas nav-link" id="pills-profile-tab1" data-toggle="pill" href="#pills-profile1" role="tab" aria-controls="pills-profile1" aria-selected="false">Information</a>
                        </li>
                    </ul>
                </div>
                
                <div class="card-body">
                    <div class="tab-content" id="pills-tabContent1">
                        <div class="tab-pane fade show active" id="pills-home1" role="tabpanel" aria-labelledby="pills-home-tab1">
                        <canvas id="lineChart" class="lineChart" width="100%" height="100%"></canvas>
                        </div>

                        <div class="tab-pane fade" id="pills-profile1" role="tabpanel" aria-labelledby="pills-profile-tab1">
                            
                        <p class=" textoStadisticas font-small text-muted mx-1">
                            Information about the statistics        
                        </p>
                        
                        </div>
                </div>
                </div>
        </div>        
    </section>
</div>

uj5u.com熱心網友回復：

您必須將[aria-expanded="true"]/定位[aria-expanded="false"]為展開/折疊圖示 UI：

.botonExpandir[aria-expanded="true"] i::before {
    content: "\f13a";
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>

<div class="columna"> 
    <section class="stadisticCard">     
        <div class="card chart-card">
            <div class="card-body pb-0">
            <h5 class="card-title font-weight-bold">Amount of food wasted each season in Spain</h5>
            <p class="card-text float-left">Spanish Government ? 2020</p>
                <div class="float-right">
                    <button class="botonExpandir collapsed" type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">
                        <i class="bi bi-arrow-down-circle"></i>
                    </button>
                </div>
            </div>
            <div class="collapse multi-collapse" id="multiCollapseExample1">
                <div class="card-body">
                    
                    <ul class="nav nav-tabs nav-fill mb-3" id="pills-tab1" role="tablist">
                        <li class="nav-item  ms-0" role="presentation">
                        <a class="linkStadisticas nav-link active" id="pills-home-tab1" data-toggle="pill" href="#pills-home1" role="tab" aria-controls="pills-home1" aria-selected="true">Statistics</a>
                        </li>
                        <li class="nav-item">
                        <a class="linkStadisticas nav-link" id="pills-profile-tab1" data-toggle="pill" href="#pills-profile1" role="tab" aria-controls="pills-profile1" aria-selected="false">Information</a>
                        </li>
                    </ul>
                </div>
                
                <div class="card-body">
                    <div class="tab-content" id="pills-tabContent1">
                        <div class="tab-pane fade show active" id="pills-home1" role="tabpanel" aria-labelledby="pills-home-tab1">
                        <canvas id="lineChart" class="lineChart" width="100%" height="100%"></canvas>
                        </div>

                        <div class="tab-pane fade" id="pills-profile1" role="tabpanel" aria-labelledby="pills-profile-tab1">
                            
                        <p class=" textoStadisticas font-small text-muted mx-1">
                            Information about the statistics        
                        </p>
                        
                        </div>
                </div>
                </div>
        </div>        
    </section>
</div>

標籤：

上一篇：SQL，每行顯示不同的專案

下一篇：使用z-index時調整影像大小的問題