使用Bootstrap 4，我正在尝试使用插入符创建一个下拉列表（例如：指向右侧）。在点击下拉列表时，应更改插入符指示方向（例如：向下）。
我有一个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
.panel-heading .accordion-toggle:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
}
.panel-heading .accordion-toggle.collapsed:after {
content: "\e080";
}
但问题是，最初所有的注意力都指向了正确的
还有其他approaches。但我不想使用JQuery，因为我的应用程序是有角度的4.想尽可能避免使用JQuery / JS。
这不是duplicate问题。
非常感谢...
答案 0 :(得分：15)
在Bootstrap V4中，他们放弃了 Glyphicons 。下面的代码将根据您的需要很好地工作。 对于下拉图标样式，您可以使用字体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>
注意：在您的演示链接中，他们使用了Bootstrap V3。
答案 1 :(得分：6)
以下是我使用Bootstrap4-CSS-fontAwesome＆amp; amp; got this working的方法。没有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
.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 */
}
谢谢@Satheesh Kumar
答案 2 :(得分：1)
这是我如何仅使用CSS来实现bootstrap 4.2和fontawesome的工作。我使用了aria标签，并为图标添加了过渡效果，对图标使用了span类。
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：
<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>
答案 3 :(得分：1)
我使用了Vinni的解决方案，在我看来，这是最简单的解决方案，但是该图标显示为装有Chrome和Firefox的框，只有Safari和Chrome移动版正确显示，我做了一些挖掘，发现新版本的Font Awesome还需要font-weight：900;当您在自定义css类中使用实体图标时，尽管某些图标可能显示得很好，但我使用的插入符号（f0d7）却没有，并且需要字体粗细900；我还使用了字体家族：“ 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";
}
答案 4 :(得分：0)
如果您使用的是SCSS，则内置~bootstrap/scss/mixins/_caret.scss专用的内置mixins。
caret-down，caret-up，caret-right，caret-left和caret($direction)。
所以，这可以变得很容易：
.panel-heading .accordion-toggle {
@include caret(right);
&.collapsed {
@include caret(left);
}
}
或者，如果您的HTML包含aria-expanded属性（强烈建议）
.panel-heading .accordion-toggle {
&[aria-expanded="false"] {
@include caret(left);
}
&[aria-expanded="true"] {
@include caret(right);
}
}
答案 5 :(得分：0)
您也可以尝试这个。仅限CSS。
.navbar-nav .dropdown.open .caret{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}