如何来回切换插入符号？答案

【问题标题】：How do I toggle the caret back and forth?如何来回切换插入符号？
【发布时间】：2019-09-14 21:56:03
【问题描述】：

我使用 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>

【问题讨论】：

嗨，比尔，欢迎来到 Stack Overflow。你能告诉我你试图让它工作的代码吗？ Here 您可以看到一个手风琴示例，它的功能似乎与您尝试实现的功能几乎完全相同。
您需要在折叠时旋转插入符号，方法是切换 font-awesome <i> 元素上的 fa-rotate-180 类，或者通过 CSS 使用 transform: rotate(180deg) 进行。看到这个答案：stackoverflow.com/questions/46297828/…

标签： javascript jquery html css

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：