如何來回切換插入符號？

Question

我使用Bootstrap創建了兩個折疊，並添加了插入符號以指示div的位置。 現在的問題似乎是我無法觸發插入符號並恢復正常。

有人可以幫忙嗎？

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <button data-toggle="collapse" data-target="#VehicleGeneralSettings" class="drop-down-caret btn-blank veh-btn-color mt-2"><i class="fa fa-caret-down fa-caret-text"></i> Vehicle General Settings</button> <div class="collapse show mb-4 mt-4" id="VehicleGeneralSettings"> Hello World </div> <button data-toggle="collapse" data-target="#VehicleListing" class="drop-down-caret btn-blank veh-btn-color mb-2"><i class="fa fa-caret-right fa-caret-text"></i> Vehicle Data Set</button> <div class="collapse vehicle-details-box mb-4" id="VehicleListing"> Hello World 2 </div> 

Answer 1

這里有一些純CSS技巧可以為您服務。 請注意以下代碼中添加的樣式。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <style> [data-toggle="collapse"] i { transform: rotate(90deg) ; } [data-toggle="collapse"].collapsed i { transform: rotate(0deg) ; } </style> <button data-toggle="collapse" data-target="#VehicleGeneralSettings" class="drop-down-caret btn-blank veh-btn-color mt-2"><i class="fa fa-caret-right fa-caret-text"></i> Vehicle General Settings</button> <div class="collapse show mb-4 mt-4" id="VehicleGeneralSettings"> Hello World </div> 

Answer 2

您可以嘗試使用CSS ::before偽元素

\\f0d7是向下插入符的字體超凡的 unicode。

 .drop-down-caret::before { content: '\\f0d7'; font-family: FontAwesome; } .drop-down-caret.collapsed::before { content: '\\f0da'; font-family: FontAwesome; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <button data-toggle="collapse" data-target="#VehicleGeneralSettings" class="drop-down-caret btn-blank veh-btn-color mt-2"> Vehicle General Settings </button> <div class="collapse show mb-4 mt-4" id="VehicleGeneralSettings"> Hello World </div>