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是下垂符号的fontawesome 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>

如何来回切换插入符号？

2 个答案: