javascript - 如何来回切换插入符？

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>