使用Bootstrap手风琴在右侧添加箭头 [英] Adding arrows to the right using Bootstrap Accordion
本文介绍了使用Bootstrap手风琴在右侧添加箭头的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想看看是否可以在Bootstrap手风琴标题的右侧添加箭头.
I wanted to see if it was possible to add arrows to the right of the Bootstrap Accordion headings.
我希望箭头在手风琴折叠时从下到上变化，这很复杂吗?
I want the arrows to change from down to up on accordion collapse, is this complicated?
我只希望标题具有箭头，并让它们在折叠时发生变化，但是要弄清楚这一点我遇到了最大的麻烦.
I want just the headings to have the arrows and for them to change on collapse, but I'm having the most trouble trying to figure this out.
这是代码:
#AccordionHeadings {
font-weight: bolder;
color: slategrey;
font-size: medium;
}
.small:hover {
background-color: #F8E498!important;
}
.list-group-item h5 {
margin-left: 10px;
}
#AccordionText {
margin-bottom: 0px!important;
color: gray;
margin-left: 10px;
}
#AccordIcon {
padding-right: 10px;
height: 25px;
width: 25px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-12 col-md-10 col-md-8">
<h4>Choose the right app for the job!</h4>
<hr style="margin-top: 10px;" />
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
<img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
<span id="AccordionHeadings">File Storage and Sharing</span><span class="glyphicon glyphicon-menu-down pull-right"></span></a>
<div id="s0" class="sublinks collapse">
<!-- sublinks collapse -->
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/e0a3j2l.png" />
<div class="">
<h5>OneDrive</h5>
<p id="AccordionText">Store your files in one place, share them with others, and get them from any device connected to the Internet.
</p>
</div>
</a>
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/uii8cJt.png" />
<div>
<h5>SharePoint</h5>
<p id="AccordionText">Share and manage content, knowledge, and applications to empower teamwork and quickly find information within your organization.</p>
</div>
</a>
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/fV0AGNi.png" />
<div>
<h5>Teams</h5>
<p id="AccordionText">Microsoft Teams is a chat-based workspace offered in Office 365. Teams makes collaborating with your team easy.
</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>在Stack Overflow的出色贡献者的帮助下，我现在使它可以工作了，但是我遇到了一个小问题.
I have now gotten it to somewhat work thanks to the help from the awesome contributors here at Stack Overflow but I've come across a small problem.
这是我当前遇到的问题.
Here is my problem that I'm currently experiencing.
页面加载:( 为什么箭头没有指向页面加载向下? )
On page load: (Why are the arrows not pointing down on pageload?)
在第一次手风琴上单击:( 现在图标正确了 )
On first Accordion click: (Now the icon is correct)
在第二次手风琴上单击:( 立即完善 )
On second Accordion click: (Perfect now)
代码:
.panel-title:after {
font-family: FontAwesome;
content: "\f106";
float: right;
color: grey;
}
.panel-title.collapsed:after {
content: "\f107";
} <a href="#" class="list-group-item panel-title" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
<img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
<span id="AccordionHeadings">File Storage and Sharing</span></a>
<div id="s0" class="sublinks collapse"> <!-- sublinks collapse -->
<a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="col-md-1">
<img style="height: 32px; width: 45px;" src="/TrainingResourceCenter/O365Training/PublishingImages/Homepage/OneDriveAccordion.png" />
</div>
<div class="col-md-11">
<h5>OneDrive</h5>
<p id="AccordionText">Store your files in one place, share them
with others, and get them from any device connected to the
Internet.</p>
</div>
</a>推荐答案
向所有单独的手风琴面板标题类添加了折叠"属性，并且效果很好.
Added the attribute "collapsed" to all the individual Accordion panel-title class and it works perfectly.
<a href="#" class="list-group-item panel-title collapsed" data-toggle="collapse" data-target="#s6" data-parent="#accordion" style="background-color: #e5edf4;">这篇关于使用Bootstrap手风琴在右侧添加箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
