為什么引導程序中的圖標在崩潰時只更改一次？為什么 jquery 代碼只運行一次？

Question

我有一個從引導程序中使用的手風琴和折疊類，並在卡片標題中添加了很棒的字體圖標。使用 jquery 我使用折疊事件將圖標更改為向上箭頭和向下箭頭。所有這些都可以正常工作，但只有在圖標更改后。 .一旦我擴展了三個卡體之后所有圖標都是向上箭頭..之后它沒有改變。加載 html 頁面時它只工作一次..我該怎么做才能重復相同..

 <script> $(document).ready(function(){ $('.collapse').on('hide.bs.collapse',function(){ $(this).parent().find('.fa-angle-down').removeClass('.fas fa-angle-up').addClass('.fas fa-angle-down');}); $('.collapse').on('show.bs.collapse',function(){ $(this).parent().find('.fa-angle-down').removeClass('.fas fa-angle-down').addClass('.fas fa-angle-up');}); }); </script>

 <div class="container"> <div id="accordian"> <div class="card"> <div class="card-header"> <i class="fas fa-angle-down"></i> <a href="#collapse1" data-toggle="collapse">Asia</a> </div> <div class="card-body collapse"data-parent="#accordian" id="collapse1"> <ul> <li>India</li> <li>China</li> <li>Japan</li> </ul> </div> </div> <div class="card"> <div class="card-header"> <i class="fas fa-angle-down"></i> <a href="#collapse2" data-toggle="collapse">Europe</a> </div> <div class="card-body collapse "data-parent="#accordian" id="collapse2"> <ul> <li>Italy</li> <li>Germany</li> <li>France</li> </ul> </div> </div> <div class="card"> <div class="card-header"> <i class="fas fa-angle-down"></i> <a href="#collapse3" data-toggle="collapse">North America</a> </div> <div class="card-body collapse"data-parent="#accordian" id="collapse3"> <ul> <li>Canada</li> <li>Mexico</li> <li>US</li> </ul> </div> </div> </div> </div>

Answer 1

您已經在$(document).ready(function()中編寫了圖標更改代碼。因此，它只會在您的頁面准備好時運行一次。您可以在onclick()事件中編寫此代碼。