时间戳

首页 > 解决方案 > Bootstrap Accordian - 在图标之后

css - Bootstrap Accordian - 在图标之后

问题描述

我试图让“之后”图标正确显示。当您第一次运行代码时，图标指向下方而不是向右。

直到您实际打开和关闭面板，它们才能正确显示。

我正在处理的网站上使用我的代码获得相同的效果。有任何想法吗？

代码示例链接

标签： csstwitter-bootstrapmedia-queriesaccordioncollapse

解决方案

所以这里的问题是两件事。

1.）您的图标已针对其状态进行了转置，因此起点朝下。

2.）这是导致第一的原因，因为collapsed第一次运行时元素上不存在该类，所以第一次运行时不满足条件。但是，导致该行为的布尔值也附加到 aria 属性中。因此，如果我们使用它来翻转条件而不是折叠的类，它应该始终与视觉上实际发生的事情一致。

留给我们一个简单的解决方法，如下所示。希望有帮助，加油！;

（哦，和 PS，如果你想为你的箭头设置动画，只需取消注释几行额外的 css 并注释掉第二个content图标。:)

/* Icon when the collapsible content is shown */
  a:before {
    font-family: "Glyphicons Halflings";
    content: "\e080";
    float: right;
    margin-left: 15px;
    /*transition: .25s ease;*/
  }
  /* Icon when the collapsible content is hidden */
  a[aria-expanded=true]:before {
    content: "\e114"; /* comment this out and uncomment the transition above and transforms below to animate */
    /*transform: rotate(90deg);
    -webkit-transform: rotate(90deg);*/
  }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <h2>Collapse</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div> 
</div>

推荐阅读