使用Bootstrap Accordion向右添加箭头
[英]Adding arrows to the right using Bootstrap Accordion
问题描述
我想看看是否可以在Bootstrap手风琴标题的右侧添加箭头。
我希望手风琴折叠时箭头从下到上变化，这是否复杂？
我只想让标题有箭头，并让它们在崩溃时改变，但我最难解决这个问题。
这是代码：
#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中令人敬畏的贡献者的帮助，但我遇到了一个小问题。
这是我目前遇到的问题。
在页面加载:( 为什么箭头没有指向页面加载？ ）
在第一个手风琴上点击:( 现在图标正确 ）
在第二个手风琴上点击:( 现在完美 ）
码：
.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>
3 个解决方案
解决方案1
0 2018-06-25 13:39:04
尝试这个：
.panel-title {
position: relative;
}
.panel-title::after {
content: "\f107";
color: #333;
top: -2px;
right: 0px;
position: absolute;
font-family: "FontAwesome"
}
.panel-title[aria-expanded="true"]::after {
content: "\f106";
}
这就是它在代码片段中的样子： PLEASE NOTE这是使用font-awesome（对于箭头），所以你需要<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>你的<head>标签中的<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
#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; } .panel-title { position: relative; } .panel-title::after { content: "\\f107"; color: #333; top: -2px; right: 10px; position: absolute; font-family: "FontAwesome" } .panel-title[aria-expanded="true"]::after { content: "\\f106"; }
<html> <head> <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"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> </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 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><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>
解决方案2
0 已采纳
将属性“collapsed”添加到所有单独的Accordion面板标题类中，它完美地运行。
<a href="#" class="list-group-item panel-title collapsed" data-toggle="collapse" data-target="#s6" data-parent="#accordion" style="background-color: #e5edf4;">
解决方案3
0 2018-06-25 15:26:39
就像Bootstrap 3解决方案一样，我将其作为可能的重复链接; 这可以通过使用[aria-expanded=true]作为CSS选择器来完全解决。 Bootstrap 4的唯一区别是手风琴的实际HTML结构，应用箭头的CSS保持不变：
.panel-title:after { font-family: FontAwesome; content: "\\f107"; float: right; color: grey; } .panel-title[aria-expanded="true"]:after { content: "\\f106"; }
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet"> <script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="//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="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <a href="#" class="list-group-item panel-title" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;"> <span id="AccordionHeadings">File Storage and Sharing</span> </a> <div id="s0" class="sublinks collapse"> <a class="list-group-item small" href="#null"> <div class="col-md-1"> [ image ] </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> </div>
注意：如果您想使用Font Awesome 5.x，您可能需要调整CSS以引用确切的字体/字体权重，因为最新版本会在多个因素之间分解其图标。
每3秒更改文本，或使用左/右箭头转到下一个文本-引导程序3
[英]Change text every 3 sec or go to the next text using left / right arrows - bootstrap 3
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.