程序员经验分享-hwhale

使用 Bootstrap Accordion 添加向右箭头

2024-03-04

我想看看是否可以在 Bootstrap Accordion 标题的右侧添加箭头。

我希望箭头在手风琴折叠时从下变为向上，这很复杂吗？

我只希望标题带有箭头，并让它们在折叠时发生变化，但我在试图解决这个问题时遇到了最大的麻烦。

这是代码：

#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>

Update

感谢 Stack Overflow 杰出贡献者的帮助，我现在已经可以正常工作了，但我遇到了一个小问题。

这是我目前遇到的问题。

页面加载时：(为什么页面加载时箭头没有指向下方？)

在第一个手风琴上单击：(现在图标是正确的)

在第二个手风琴上单击：(现在完美)

Code:

.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>

尝试这个：

.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";
}

这就是代码片段中的样子：请注意这是使用 font-awesome （用于箭头），所以你需要<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>在你的<head> tags

#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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

twitterbootstrap

css

使用 Bootstrap Accordion 添加向右箭头 的相关文章