使用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的问题.
提前谢谢了…
解决方法
在Bootstrap V4中,他们放弃了Glyphicons.下面的代码将根据您的需要很好地工作.
对于下拉图标样式,您可以使用字体真棒.
对于下拉图标样式,您可以使用字体真棒.
[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,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,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div>
注意：在您的演示链接中,他们使用了Bootstrap V3.
