html - 使用 Bootstrap Accordion 向右添加箭头

标签 html twitter-bootstrap css

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

我希望箭头在 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>

更新

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

这是我目前遇到的问题。

在页面加载时:(为什么箭头在页面加载时不指向下方？)

enter image description here

第一次 Accordion 点击:(现在图标是正确的)

enter image description here

在第二个 Accordion 上点击:(Perfect now)

enter image description here

代码:

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

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

关于html - 使用 Bootstrap Accordion 向右添加箭头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51024532/

上一篇：javascript - .click 事件在 Safari 浏览器中不起作用

下一篇：javascript - 将数组值移动到另一个特定数组

相关文章：

html - 如何在网站/WordPress 中使用 `control background elements`？

javascript - 如何用ajax刷新评论？

css - Angular 6/7具有多个Angularjs自定义元素多个全局style.css如何处理？

html - 可滚动居中的 NavBar

javascript - XHTML/HTML/JS 语法 : When do I use &amp;?

JavaScript 执行错误

html - 页脚中的空白

javascript - 使用 Parse.com 进行 Bootstrap Typeahead

html - Bootstrap 导航栏未正确显示导航栏。并且没有反应

html - 响应式列表项

©2024 IT工具网  联系我们