Html Bootstrap 4 在单击下拉列表时更改插入符号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46297828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 change caret on clicking dropdown
提问by Vinni
Using Bootstrap 4, I am trying to create a dropdown with caret (Ex: pointing right). On clicking dropdown the caret pointing direction should be changed (Ex: down).
使用 Bootstrap 4，我试图创建一个带有插入符号的下拉列表（例如：指向右侧）。单击下拉菜单时，插入符号指向的方向应更改（例如：向下）。
I have got a way to do that
我有办法做到这一点
/*Please refer the above link for full code details*/
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
This content is hidden
</div>
</div>
.css
.css
.panel-heading .accordion-toggle:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
}
.panel-heading .accordion-toggle.collapsed:after {
content: "\e080";
}
But the catch is, initially all the carets pointing down which should be right
但问题是，最初所有的插入符号都应该是正确的
There are other approaches. But I don't want to use JQuery, as my application is angular 4. Would like to avoid JQuery/JS as much as possible.
还有其他方法。但我不想使用 JQuery，因为我的应用程序是 angular 4。想尽可能避免使用 JQuery/JS。
This is not a duplicatequestion.
这不是一个重复的问题。
Many thanks in advance...
提前谢谢了...
回答by Satheesh Kumar
In Bootstrap V4 they have dropped the Glyphicons. Below code will work well as per your need. For drop-down icon style, you can use font awesome.
在 Bootstrap V4 中，他们删除了Glyphicons。下面的代码将根据您的需要正常工作。对于下拉图标样式，您可以使用 font awesome。
[data-toggle="collapse"]:after {
display: inline-block;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f054";
transform: rotate(90deg) ;
transition: all linear 0.25s;
}
[data-toggle="collapse"].collapsed:after {
transform: rotate(0deg) ;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div id="accordion" role="tablist">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h5>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>Here is the codepen demo link
Note: In your demo link they have used Bootstrap V3.
注意：在您的演示链接中，他们使用了 Bootstrap V3。
回答by Vinni
Here is how I got this workingwith Bootstrap4-CSS-fontAwesome & No JS/JQuery.
这是我如何得到这个工作与Bootstrap4-CSS-fontAwesome＆没有JS / JQuery的。
<a class="accordion-toggle collapsed" data-toggle="collapse" href="#anyId">
click
</a>
<div id="anyId" class="collapse">
Hi
</div>
<!-- CDNs for font-awesome, bootstrap, JQuery -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
.css
.css
.accordion-toggle:after {
font-family: 'FontAwesome';/* essential to enable caret symbol*/
content: "\f0d7";/* adjust as needed, taken from font-awesome.css */
color: grey;
}
.accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\f0da"; /* adjust as needed, taken from font-awesome.css */
}
Thank you @Satheesh Kumar
谢谢@Satheesh Kumar
回答by Robert Doyle
Here's how I got mine working using only CSS for bootstrap 4.2 and fontawesome. I've used the aria label and added transitions for the icon, using a span class for the icon
下面是我如何只使用 CSS 来处理 bootstrap 4.2 和 fontawesome。我使用了 aria 标签并为图标添加了转换，为图标使用了 span 类
CSS:
CSS：
#accordionExample .btn[aria-expanded=false] span:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f107";
float: right;
transition: all .5s;
}
#accordionExample .btn[aria-expanded=true] span:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f107";
float: right;
transition: all .5s;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
HTML:
HTML：
<div class="container my-5 mw-600">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<a class="btn btn-link d-flex" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false">
Collapsible Group Item #1
<span class="ml-auto"></span></a>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<a class=" btn btn-link collapsed d-flex align-items-center" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false">
Collapsible Group Item #2
<span class="ml-auto"></span>
</a>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<a class="btn btn-link collapsed d-flex" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false">
Collapsible Group Item #3<span class="ml-auto"></span>
</a>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
回答by lambidu
If you're using SCSS, there are built-in mixins especially for this, located at ~bootstrap/scss/mixins/_caret.scss.
如果您使用 SCSS，则有专门用于此的内置 mixin，位于~bootstrap/scss/mixins/_caret.scss.
caret-down, caret-up, caret-right, caret-leftand caret($direction).
caret-down，caret-up，caret-right，caret-left和caret($direction)。
So, this can become as easy as:
所以，这可以变得很简单：
.panel-heading .accordion-toggle {
@include caret(right);
&.collapsed {
@include caret(left);
}
}
or, if your HTML contains aria-expandedattribute (which is highly advised)
或者，如果您的 HTML 包含aria-expanded属性（强烈建议这样做）
.panel-heading .accordion-toggle {
&[aria-expanded="false"] {
@include caret(left);
}
&[aria-expanded="true"] {
@include caret(right);
}
}
回答by TheOneAndOnly ME
I used Vinni's solution, it seemed to me the simplest one, but the icon showed as a box with Chrome and Firefox, only Safari and Chrome mobile displayed correctly, I did some digging and found out that the new version of Font Awesome also requires font-weight: 900; when you use solid icons in custom css classes, so while some icons may showed fine the caret I was using (f0d7) didn't and needed font-weight 900; I also used font-family: 'Font Awesome\ 5 Free'; instead of only font-family: 'FontAwesome'; The revised CSS looks like this:
我使用了 Vinni 的解决方案，在我看来它是最简单的解决方案，但是图标显示为带有 Chrome 和 Firefox 的框，只有 Safari 和 Chrome 移动版正确显示，我做了一些挖掘，发现新版本的 Font Awesome 也需要字体-重量：900；当您在自定义 css 类中使用实心图标时，虽然某些图标可能显示良好，但我使用的插入符号 (f0d7) 没有并且需要字体粗细 900；我还使用了 font-family: 'Font Awesome\ 5 Free'; 而不仅仅是字体系列：'FontAwesome'; 修改后的 CSS 如下所示：
.accordion-toggle:after {
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
content: "\f0d7";/
color: grey;
}
.accordion-toggle.collapsed:after {
content: "\f0da";
}
