如何来回切换插入符号？
[英]How do I toggle the caret back and forth?
问题描述
I have created two collapses using Bootstrap and added caret to indicate the position of the div. 
我使用Bootstrap创建了两个折叠，并添加了插入符号以指示div的位置。 Now the issue seems to be I'm not able to trigger caret down and back to normal. 现在的问题似乎是我无法触发插入符号并恢复正常。
Can anyone help? 有人可以帮忙吗？
<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>
2 个解决方案
解决方案1
1 2019-04-25 13:08:25
Here's a bit of pure css trick that will work for you. 这里有一些纯CSS技巧可以为您服务。 Notice the added style in below code. 请注意以下代码中添加的样式。
<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
1 已采纳 2019-04-25 13:36:46
You can try using css ::before pseudo-element 您可以尝试使用CSS ::before伪元素
\\f0d7 is a fontawesome unicode for down caret. \\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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
我如何获得一个切换按钮来将数组从降序切换到升序？ - How do I get a toggle button to toggle an array back and forth from descending to ascending?
如何在反应应用程序中设置系统偏好暗模式，但还允许用户来回切换当前主题 - How do I set system preference dark mode in a react app but also allow users to toggle back and forth the current theme
如何删除音频类并来回切换？ - How to remove class of audio and toggle back and forth?
我如何与一个弹出窗口来回通信 - How do I communicate back and forth with a popped up window
当我在 vuejs 中单击它时，如何将 div 中的文本从“暗”和“亮”来回切换？ - How do I switch text in a div from 'dark' and 'light' back and forth when i click it in vuejs?
如何编写一个 javascript 函数来来回切换按钮颜色？ - How do I program a javascript function to switch button colors back and forth?
如何在 three.js 中的相机 object 的四元数之间来回切换？ - How do I slerp back and forth between quaternions for camera object in three.js?
使用.toggle后如何恢复菜单？ - How do I get my menu back after using .toggle?
如何来回移动正方形 - How to move a square back and forth
按钮转换使用CSS或JS来回切换 - button transition toggle back and forth using CSS or JS
相关标签